关于自定义组件的 v-model中的事件绑定。

Question

vue的事件绑定语法是怎么运行的？

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>

上面是vue官方文档的一段代码
对于其中的v-on:change="$emit('change', $event.target.checked)"这一项理解有点问题，在这里input用v-on监听change事件，当触发change事件后，执行$emit又一次触发change事件，这让不就成一个循环了吗？

Answer 1

这个地方讲的是一个子组件实现双绑的操作，v-on:change触发的change事件是由上层来接受的，组件本身不会接收到这个事件
v-on:change做的事情是将input这个dom元素的change事件转化成Vue组件的change事件