Appearance
22.说说你对双向绑定的理解，以及它的实现原理吗？
1.1 双向绑定的概念
vue 中双向绑定靠的是指令 v-model，可以绑定一个动态值到视图上，同时修改视图能改变数据对应的值（能修改的视图就是表单组件） 经常会听到一句话：v-model 是 value + input 的语法糖。
1.2 表单元素中的 v-model
内部会根据标签的不同解析出不同的语法。并且这里有“额外”的处理逻辑
- 例如 文本框会被解析成 value + input 事件 (同时处理中文输入问题)
- 例如 复选框会被解析成 checked + change 事件
- ...
1.3 组件中的 v-model
组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件。对于组件而言 v-model 就是 value + input 的语法糖。可用于组件中数据的双向绑定。
Vue2 中 v-model 名字可以修改：
js
Vue.component("base-checkbox", {
model: {
prop: "checked",
event: "change",
},
props: {
checked: Boolean,
},
template: `
<input
type="checkbox"
v-bind:checked="checked"
v-on:change="$emit('change', $event.target.checked)"
>
`,
});Vue.component("base-checkbox", {
model: {
prop: "checked",
event: "change",
},
props: {
checked: Boolean,
},
template: `
<input
type="checkbox"
v-bind:checked="checked"
v-on:change="$emit('change', $event.target.checked)"
>
`,
});那组件中如果有多个数据想做双向数据绑定怎么办？ 很遗憾在 vue2 中不支持使用多个 v-model 的 （使用过时的
.sync语法）。vue3 中可以通过以下方法进行绑定。
vue
<my v-model:a="a" v-model:b="b" v-model:c="c"></my><my v-model:a="a" v-model:b="b" v-model:c="c"></my>