大家都知道Vue可以用v-model可以实现双数据绑定,但它能实现绑定的原理到底是什么呢?比如input用v-model双向数据绑定后,数据是怎么传输的?
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的!
v-model就是通过v-bind:value=‘msg’ 绑定属性,当数据发生变化时,表单内容跟着变化;
在通过v-on:input="handel"监听事件, 当页面数据变化时,数据会通过事件根据页面数据的变化而变化; 在 通过事件处理来进行双向数据绑定的。
根据官方文档介绍,v-model本质上就是语法糖,即利用v-model绑定数据后,其实就是既绑定了数据,又添加了一个input监听事件handle
- 自定义事件也可以用于创建支持
v-model
的自定义输入组件,如:
<input type="text" v-model="value">
- 等价于:
<input
type="text"
v-bind="value"
v-on:input="handle"
<script>
//...省略
methods: {
handle