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