Vue自定义组件通过v-model通信

model：
model的类型定义如下，它有两个属性 prop、event

 

v-model默认情况如下：

prop: 默认绑定的是value
event: 默认触发的事件类型是input

 

所以下面可以自己指定类型：

model: {
  prop: 'checked', 
  event: 'change'
}

 

那么在props中就必须指定接收的属性是 checked

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>

 

完整demo：

子组件：
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>
  `
})

 v-model 也可以等于 .sync