Vue 自定义组件实现v-model双向绑定

之前一直很好奇element-ui自定义组件是怎么实现双向绑定的，后来抽空学习了一下，今天来复习一下加深一下记忆。

首先在components目录下新建一个名为MyInput的组件，代码如下：

// v-model 默认接收一个value的参数和向父组件触发一个input的事件


  

然后在父组件引入使用，使用方式如下：

v-model其实就是一个语法糖，就是父组件监听子组件emit发出的input事件，然后把子组件传来的值赋给了message，等同于以下代码：

刚才也说了v-mode默认接收的props是value，触发的是input事件，当然我们也可以通过model改一下，这样就更灵活了，双向绑定就不仅仅只是适用于input组件了，就可以像element-ui那样自定义自己的radio checkbox组件并可以双向绑定了：

子组件修改如下：

父组件修改代码如下：

现在就可以灵活自定义自己的双向绑定组件了，如果组件使用频繁的话，可以注册到全局组件，就不用一次次引入了。