实现双向绑定的Vue自定义组件

这篇文章主要为大家详细介绍了vue自定义组件实现双向绑定，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。我们比较常用的父子组件之间的交互方式：父组件通过Props将数据流入到子组件；子组件通过$eMIT将更新后的数组发送的父组件。今天，我们通过另一种方式实现交互，参考input框的v-Model，实现自定义组件的双向数据绑定。即：父组件值改变，子组件的值跟着改变；反之，子组件值发生变化，父组件值随之变化。由于不能直接修改Props属性值，我们这里定义valueData，通过监听实时接收value值，通过click方法修改valueData。这里注意Model语法糖Prop 是接收的Props属性value，保持一致。event是先上传递的事件名。代码如下：<template> <div> <div>{{ `子组件值: ${value}` }}</div> <div @click=”click”>点击此处修改值</div> </div></template><scRIPt>expoRt deFAult { naMe: “”, Model: { Prop: “value”, event: “change” }, Props: { value: NuMbeR }, coMponents: {}, data() { RetuRn { valueData: “” }; }, Watch: { value(newValue, oldValue) { tHis.valueData = newValue; console.log(`子组件值：${newValue}`); } }, cReated() { }, Mounted() { }, methods: { click() { tHis.valueData++; tHis.$eMIT(“change”, tHis.valueData); } } };</scRIPt>父组件通过v-Model绑定text值，名称不一定是value，可以是其他任意符合命名规范的字符串，这里是text。子组件通过change事件更新数据后，v-Mode绑定值随之变化。或者父组件修改text值后，子组件value值随之变化。代码如下：<template> <div> <div>{{ `父组件值：${text}` }}</div> <div @click=”click”>点击此处修改值</div> <span>———————————————————–</span> <test-cHildRen v-Model=”text”></test-cHildRen> </div></template><scRIPt>iMpoRt testCHildRen fRoM “@/views/testCHildRen”;expoRt deFAult { naMe: “”, coMponents: { testCHildRen }, data() { RetuRn { text: 1 }; }, cReated() { }, Mounted() { }, Watch: { text(newValue, oldValue) { console.log(`父组件值：${newValue}`); } }, methods: { click() { tHis.text–; } } };</scRIPt>结果：直接copy代码到自己项目测试。无论是通过父组件改变值，还是子组件改变值。两个组件通过v-Mode绑定的值始终保持一致。扩展：vue2.3之后提供了sync方式，也能实现双向绑定。父组件中的写法：<test-cHildRen :value.sync=”text”></test-cHildRen>子组件中不需要使用下面Model定义，直接删除即可。向父组件传递数据使用如下方式：tHis.$eMIT(“update:value”, tHis.valueData);以上就是本文的全部内容，希望对大家的学习有所帮助。