vue自定义组件实现双向数据绑定,vue如何实现双向绑定的
本文主要详细介绍vue自定义组件双向绑定的实现。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
场景：
我们比较了父子组件之间的常见交互方式：
父组件通过props将数据流入子组件；
子组件通过$emit将更新后的数组发送给父组件；
今天我们用另一种方式实现交互，参考输入框的v模型，实现自定义组件的双向数据绑定。
即当父组件的值改变时，子组件的值也相应改变；反之，子组件的值改变，父组件的值也相应改变。
子组件定义：
由于不能直接修改props属性值，所以我们在这里定义valueData，通过监控实时接收值，通过click方法修改valueData。
这里注意模型语法sugar prop是接收到的prop属性值，这是一致的。事件是首先传递的事件名称。
代码如下：
模板
差异
Div{{ { `子组件值：${value}` }}/div
Div @click=click 单击此处修改值/div
/div
/模板
脚本
导出默认值{
名称： ，
型号：{
属性：“值”，
事件：“更改”
},
道具：{
值：数字
},
组件：{}，
data() {
返回{
值数据：“”
};
},
观察：{
值(新值，旧值){
this . value data=new value；
Console.log(`子组件值：$ { new value } `)；
}
},
已创建(){
},
已安装(){
},
方法：{
单击(){
this.valueData
这个。$emit(change ，this . value data)；
}
}
};
/脚本
style lang=less 范围
/风格
父组件定义：
父组件通过v-model绑定文本值。名称不一定是值，而是符合命名约定的任何其他字符串。这是正文。
在子组件通过change事件更新数据后，垂直模式绑定值会更改。
或者在父组件修改了文本值之后，子组件的值会发生变化。
代码如下：
模板
差异
Div{{ { `父组件值：${text}` }}/div
Div @click=click 单击此处修改值/div
span - /span
测试儿童v-model= text /测试儿童
/div
/模板
脚本
从“@/views/TestChildren”导入test children；
导出默认值{
名称： ，
组件：{ TestChildren }，
data() {
返回{
正文：1
};
},
已创建(){
},
已安装(){
},
观察：{
文本(新值，旧值){
Console.log(`父组件值：$ { new value } `)；
}
},
方法：{
单击(){
this . text-；
}
}
};
/脚本
style lang=less 范围
/风格
结果：
将代码直接复制到您自己的项目测试中。是父组件更改值还是子组件更改值。由v-mode绑定的两个组件的值总是一致的。
问与答：
有同学问，这不是和通过props向下发送数据，再通过$emit向上发送数据一样吗？也能达到我的双向绑定效果。否则，如果我们没有通过v-model，那么我们必然会在父组件中编写这样的代码：
test-children @ change= change text /test-children
然后通过定义changeText方法修改文本值。
想象一下，当我们的页面很复杂，引用的组件数量巨大时，我们需要在页面中定义十几二十个方法。可读线大大减少，增加了维护成本。
扩展：
vue2.3以后提供了sync模式，也可以实现双向绑定。
写入父组件：
测试子代：value . sync= text /测试子代
您不需要在子组件中使用下面的模型定义，只需删除它们。
型号：{
道具：“值”，
事件：“改变”
},
向父组件传递数据使用以下方法：
这个。$emit(update:value ，this . value data)；
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。