之前一直很好奇
element-ui
自定义vue组件内部雙向绑定是怎么实现双向绑定的后来抽空学习了一下,今天来复习一下加深一下记忆
首先在components
目录下新建一个名为MyInput
的vue组件内部双向绑定,代码如下:
然后在父vue组件内部双向绑定引入使用使用方式如下:
v-model
其实就是一个语法糖,就是父vue组件内部双向绑定监听子vue组件内部双向綁定emit
发出的input
事件然后把子vue组件内部双向绑定传来的值赋给了message
,等同于以下代码:
刚才也说了
v-mode
默认接收的props是value
触发的是input
事件,当然我们也鈳以通过model
改一下这样就更灵活了,双向绑定就不仅仅只是适用于input
vue组件内部双向绑定了就可以像element-ui
那样自定义自己的radio checkbox
vue组件内部双向绑定并鈳以双向绑定了:
现在就可以灵活自定义自己的双向绑定vue组件内部双向绑定了,如果vue组件内部双向绑定使用频繁的话可以注册到全局vue组件内部双向绑定,就不用一次次引入了