Vue自定义组件通过v-model实现父子组件双向同步通信

在vue官网2.2.0的api新增的model选项，可以帮助我们实现父子同步通信。

1. model
model的类型定义如下，它有两个属性prop，event.
一个组件上的v-model会把 value用作 prop
把 input用作 event

类型：{ prop?: string, event?: string }

model: {
    prop: ‘value1’, // prop说:我要在该组件被使用(被父组件调用)时,v-model的值绑定给value1
    event: ‘change’ // event说:我emit(触发)change的时候，参数的值就是父组件v-model收到的值。
  },

例子

Vue.component('my-checkbox', {           //这是一个名字为my-checkbox的组件
  model: {
    prop: 'checked', 
    event: 'change'
  },
  props: {
     value: String,   
     checked: {       //因为在model中使用了prop: 'checked'，所以这里必须显示的声明这个变量
         type: Number,
         default: 0
    }
  },
  // ...
})

使用这个组件

<my-checkbox v-model="foo" value="some value"></my-checkbox>

上面代码相当于：

<my-checkbox
  :checked="foo"
  @change="val => { foo = val }"
  value="some value">
</my-checkbox>

prop属性的作用：通过v-model传的值来更新prop的value1
event属性的作用：通过将新变化的value1的值更新给v-model的数据

2. 父子组件使用v-model双向同步通信
子组件

import Vue from 'vue'
const component = {
  // 使用model对象,定义它的两个属性,就可以在父组件通过v-model实现父子组件双向数据绑定
  model: {
    prop: 'value1', // prop说:我要将value1作为该组件被使用(被父组件调用)时,v-model能取到的值
    event: 'change' // event说:我emit(触发)change的时候，参数的值就是父组件v-model收到的值。
  },
  props: {
    value1: String
  },
  template: `
    <div>
      <span>这里显示的是子组件input的value1值</span>
      <input type="text" @input="handleInput" :value = "value1">
    </div>
  `,
  methods: {
    handleInput (e) {
      this.$emit('change', e.target.value)
    }
  }
}

父组件

new Vue({
  el: '#root',
  data () {
    return {
      myvalue: '123'
    }
  },
  components: {
    CompOne: component
  },
  template: `
    <div>
      <comp-one v-model="myvalue"></comp-one>  //使用子组件
      <p>这里显示的是父组件的myvalue值:{{myvalue}}</p>
    </div>
  `
})

上面的<comp-one>组件实际相当于：

<comp-one
   :value1 = myvalue,
   @change = function: val => { myvalue = val}
>
</comp-one>

1. 实际上prop是通过v-model让父组件给子组件传递数据，改变子组件数据
2. 而event是给父组件传递数据，改变父组件数据
以此实现双向数据绑定

运行结果：

Vue自定义组件通过v-model实现父子组件双向同步通信

猜你喜欢