场景：

我们比较常用的父子组件之间的交互方式：
父组件通过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>
<style lang='less' scoped>
</style>

父组件定义：

父组件通过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>
<style lang='less' scoped>
</style>

结果：

直接copy代码到自己项目测试。无论是通过父组件改变值，还是子组件改变值。两个组件通过v-mode绑定的值始终保持一致。

答疑：

有同学就问了，这不是和通过props向下流入数据，再通过$emit方式向上传递数据一样么也能实现我这种双向绑定的效果。其实不然，如果不通过v-model，那么我们势必会在父组件写这样的代码：

<test-children @change="changeText"></test-children>

然后在通过定义changeText方法修改text值。
试想，当我们的页面比较复杂，引用组件量比较庞大，页面中就需要多定义这样十几、二十几个方法。可阅读行大大降低，增加了维护成本。

扩展：

vue2.3之后提供了sync方式，也能实现双向绑定

父组件中的写法：

<test-children :value.sync="text"></test-children>

子组件中不需要使用下面model定义，直接删除即可。

model: {
prop: “value”,
event: “change”
},

向父组件传递数据使用如下方式：

this.$emit("update:value", this.valueData);

总结

每天记录一点，从小小菜鸟变小菜鸟！！！

vue自定义组件实现双向绑定相关推荐

vue 自定义组件 v-model双向绑定、父子组件同步通信
父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx ...
vue自定义组件数据双向绑定，获取vue自定义组件input框输入的值
1.首先创建一个自定义组件 Vue.component('test-component',{template:`<div id="el"><input @inpu ...
【笔记】vue父子组件数据双向绑定（v-model、prop.aync）
文章目录一.v-model 1.最简写法 2.可自定义属性名的写法(2.2.0+) 3.多绑二..sync [自定义组件的 v-model - Vue.js 中文文档]:(https://vuej ...
angular中自定义组件实现双向绑定
使用get,set关键字 get返回父组件变化后的值 set为组件值产生变化后父组件改变 import {Input, Output } from '@angular/core'; ........ ...
Vue实现组件props双向绑定解决方案
注意: 子组件不能直接修改prop过来的数据,会报错方案一: 用data对象中创建一个props属性的副本 watch props属性赋予data副本来同步组件外对props的修改 watch ...
vue 父子组件传值双向绑定
父组件: <template> //:content , @content 中的:@一个是v-bind 一个是v-on的写法. //:content="detail" ...
Vue自定义组件并引入
今天,bug菌为大家带来一期帝王级干货,有关于前端vue的组件教学,深入指引大家在vue中如何创建自定义的组件,并且在vue中引入你自定义的组件: 具有很好的教学价值,希望小伙伴们根据这篇文章可以有所 ...
vue 自定义组件双向数据绑定
文章目录序属性&事件传值双向绑定 v-model组件双向绑定 .sync修饰符双向绑定总结 !!!这边文章记录的是 vue2 的概念,vue3 对双向绑定进行了改动,不要把一下代码放到 ...
vue自定义组件的v-model
vue对于原生的表单元素都支持v-model进行双向绑定,同样的,自定义组件也可以使用v-model实现双向绑定(这个个人觉得主要用于自定义组件内部存在表单元素时用的比较多). 对于原生表单元素比如 ...

vue自定义组件实现双向绑定

场景：

子组件定义：

父组件定义：

结果：

答疑：

扩展：

总结

vue自定义组件实现双向绑定相关推荐

最新文章

热门文章