Vue学习笔记----组件事件

组件绑定v-model实现数据的更新

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

<base-checkbox v-model="lovingVue"></base-checkbox>

loginVue即为data中的属性，它将传入组件的prop的checked
即loginVue = checked，组件中使用v-bind绑定checked，当输入框的值发生改变时，触发change事件
这里使用$emit(event,value)绑定事件函数

组件绑定原生事件

sync修饰符实现双向绑定

<text-document v-bind.sync="doc"></text-document>

<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>