使用v-model对父子组件进行双向绑定

在vue中，通常父子组件通信，我们使用的是props，但是有的场景，我们需要对父子组件进行双向绑定。这时我们会用到v-model自定义组件。

官网的解释则是，父组件将值通过v-model进行绑定，之后子组件通过props的key为value进行接收，通过事件input触发更改父组件。

当然为了避免子组件内有data，或其他props名为value，所以在当前实例下，有一个model属性,定义方法如下

 model: {
    prop: 'checked', // props默认是value
    event: 'change' // 事件名默认是input
  },

这样在子组件内通过$emit触发定义好的model事件名更改父组件的值。并且我们通过watch监听父组件值的更改绑定至子组件。代码如下：

父组件

父组件

子组件

子组件

效果图