Vue3 数据双向绑定与动态传值响应
Vue2的v-model与.sync是语法糖，props: ['value'], $emit('input', newVal);
Vue3对v-model进行了调整，取消了.sync
1. v-model="count" 双向绑定
2. v-model:countA="count" 双向绑定
3. :countB="count" 单向传值
4. :countC="count" @update:countC="count = $event" 显示双向绑定
5. :countD="count" dynamicName="countD" 动态传值响应，特殊情形下使用。做组态开发时可能会用到。
Vue2父组件与子组件的双向绑定怎么实现
1. 在组件内的data对象中创建一个props属性的副本
因为result不可写，所以需要在data中创建一个副本myResult变量，初始值为props属性result的值，同时在组件内所有需要调用props的地方调用这个data对象myResult。
Vue.component("switchbtn", {
template: "div @click='change'{{myResult?'开':'关'}}/div",
props: ["result"],
data: function () {
return {
myResult: this.result//data中新增字段
};
},
......
});
2. 创建针对props属性的watch来同步组件外对props的修改
此时在组件外（父组件）修改了组件的props，会同步到组件内对应的props上，但是不会同步到你刚刚在data对象中创建的那个副本上，所以需要再创建一个针对props属性result的watch（监听），当props修改后对应data中的副本myResult也要同步数据。
Vue.component("switchbtn", {
template: "div @click='change'{{myResult?'开':'关'}}/div",
props: ["result"],
data: function () {
return {
myResult: this.result
};
},
watch: {
result(val) {
this.myResult = val;//新增result的watch，监听变更并同步到myResult上
}
},
......
3. 创建针对props副本的watch，通知到组件外
此时在组件内修改了props的副本myResult，组件外不知道组件内的props状态，所以需要再创建一个针对props副本myResult，即对应data属性的watch。
在组件内向外层（父组件）发送通知，通知组件内属性变更，然后由外层（父组件）自己来变更他的数据
最终全部代码：
div id="app"
switchbtn :result="result" @on-result-change="onResultChange"/switchbtn
input type="button" value="change" @click="change"
/div
Vue.component("switchbtn", {
template: "div @click='change'{{myResult?'开':'关'}}/div",
props: ["result"],
data: function () {
return {
myResult: this.result//①创建props属性result的副本--myResult
};
},
watch: {
result(val) {
this.myResult = val;//②监听外部对props属性result的变更，并同步到组件内的data属性myResult中
},
myResult(val){
//xxcanghai 小小
this.$emit("on-result-change",val);//③组件内对myResult变更后向外部发送事件通知
}
},
methods: {
change() {
this.myResult = !this.myResult;
}
}
});
new Vue({
el: "#app",
data: {
result: true
},
methods: {
change() {
this.result = !this.result;
},
onResultChange(val){
this.result=val;//④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
}
}
});
至此，实现了组件内数据与组件外的数据的双向绑定，组件内外数据的同步。最后归结为一句话就是：组件内部自己变了告诉外部，外部决定要不要变。
如何在Vue2中实现组件props双向绑定
在组件内的data对象中创建一个props属性的副本 因为result不可写，所以需要在data中创建一个副本myResult变量
如何在Vue2中使用双向绑定
Vue2 取消了 .sync 指令修饰符，推崇单向闭环的数据流。即：父级通过 props 向子级传递数据，子级如果需要修改数据就需要在父级添加监听事件，并在子级中去触发事件修改值。
在多数情况下，是不需要双向绑定的，单向数据流更容易追踪数据变化排查问题。但一些特定场景下，如弹窗，除了外部由父组件控制显示和隐藏外，组件内部也有关闭和取消等按钮需要控制显示和隐藏。这虽然可以通过触发事件让父级修改显示状态来实现，但每一个弹窗组件都需要做一遍这样的事总觉得很不爽。
v-model
v-model 是 Vue2 中唯一支持双向绑定的指令，用于表单控件绑定，但不代表它只能用在表单控件之上。在文档 使用自定义事件的表单输入组件 一节中提到了， v-model 其实是个语法糖。
input v-model="something"
!-- 等价于以下内容 --
input :value="something" @input="something = $event.target.value"
也就是说，你只需要在组件中声明一个 name 为 value 的 props ，并且通过触发 input 事件传入一个值，就能修改这个 value 。
父组件中引用
myComponent v-model="title"/myComponent
子组件
const myComponent = {
template: 'divh1{{value}}/h1button @click="changeTitle"Change/button/div',
props: {
value: String
},
methods: {
changeTitle() {
this.$emit('input', '子组件')
}
}
}
上面这个例子，最初显示的是父组件传入的 title ，点击子组件中的按钮后会修改显示值为子组件 。
组件内部控制关闭的弹窗
现在可以解决弹窗组件内部自行关闭的问题了。
Demo
多字段的双向绑定
一个组件只能定义一个 v-model ，假如想双向绑定多个值怎么办？
v-model 并没有限制 value 的数据类型，只是限制了是 一个值！ 那么只需要把 value 的数据类型换成 Object 或者 Arr*** ，把多出的字段作为对象的属性或数组的元素传入，多少个都不是问题了。
从***实践角度出发，推荐只是特定场景下使用，比如自定义的表单组件。
vue双向绑定的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue双向绑定例子、vue双向绑定的信息别忘了在本站进行查找喔。