vue的响应式原理是实现了数据－>视图，接下来我们要学习 视图－>数据的原理。
v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：
1. v-bind绑定一个value响应式数据
2. v-on指令给当前元素绑定input事件
image.png
自定义组件实现v-model
// 拆解如下
<my-component :value="price" @input="price = $event.target.value"></my-component>
// 根据这个我们可以在子组件中，进行拼凑value属性，input方法。
Vue.component('my-component', {
template: `
<span>
<input
type="text"
:value="value"
@input="$emit('input', $event.target.value)"
>
</span>
`,
props: ['value'],
})
网友评论