在vue2使用v-model对组件进行双向绑定

在vue2使用v-model对组件进行双向绑定

1. 默认情况

v-model=“visible” 等价于 :value=“visible” 加上 @input=“visible = $event”

所以 v-model 就是父组件向子组件传了个 value 字段的值,子组件使用 props 定义 value 字段, 就可以在子组件使用 value 读取这个值;子组件使用 $emit(‘input’,值) 就可以改变 v-model 的值
父组件

javascript"><template>
  <div id="app">
    <Tab v-model="visible" />
  </div>
</template>

<script>
import Tab from "./***ponents/Tab.vue"
export default {
  name: "App",
  data() {
    return {
      visible: true,
    }
  },
  ***ponents: { Tab },
}
</script>

<style></style>

<script/>

子组件

JavaScript
<template>
  <div v-show="value">
    我是子组件文字
    <button @click="$emit('input', false)">关闭</button>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },
}
</script>

2. 子组件改变默认字段名与事件

父组件

JavaScript
<template>
  <div id="app">
    <Tab v-model="visible" />
  </div>
</template>

<script>
import Tab from "./***ponents/Tab.vue"
export default {
  name: "App",
  data() {
    return {
      visible: true,
    }
  },
  ***ponents: { Tab },
}
</script>

<style></style>

子组件

JavaScript
<template>
  <div v-show="show">
    我是子组件文字
    <button @click="$emit('change', false)">关闭</button>
  </div>
</template>

<script>
export default {
  model: {
    prop: "show",
    event: "change",
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
}
</script>

子组件定义了以下代码就回改变默认字段

JavaScript
    model: {
       prop: "show",
       event: "change",
    }

此时,v-model=“visible” 等价于 :show=“visible” 加上 @change=“visible = $event”

转载请说明出处内容投诉
CSS教程_站长资源网 » 在vue2使用v-model对组件进行双向绑定

发表评论

欢迎 访客 发表评论

  • 10101会员总数(位)
  • 180316资源总数(个)
  • 0本周发布(个)
  • 0今日发布(个)
  • 20144稳定运行(天)

一个令你着迷的主题!

查看演示 官网购买