组件间数据的双向绑定

一、通过自定义事件
二、通过v-model
三、通过.sync修饰符
四、provide和inject

代码中的p-8,mt-8等，都是自己写的工具类，复制代码的同学，可以自行删掉。

复习一下组件间通信
父传子：props
子传父：$emit
父获取子数据或者调用子方法：this.$refs.child,this.$children
子获取父属性或者调用父方法：this.$parent
祖先传后代：provide，inject
任意组件：Vuex，$bus

一、通过自定义事件

this.$emit("event", value)

这里因为大家经常使用，我就直接用对象类型的props做演示了。

父组件

<template><div class="test p-8"><div class="header p-8"><el-button type="primary" @click="myValue.age++">增加</el-button>{{ myValue }}</div><div class="container mt-8"><inner-comp:myValue="myValue"@handleChange="handleChange"/></div></div>
</template><script>
import InnerComp from "./innerComp";export default {name: "test",components: {InnerComp},data() {return {myValue: {name: "花生",age: 18}}},methods: {handleChange(val) {this.myValue = val}}
}

子组件

<template><div class="innerComp p-8"><el-button type="danger" @click="changeAge">减少</el-button><el-button type="danger" @click="changeName">修改名字</el-button>{{ value }}</div>
</template><script>
export default {name: "innerComp",props: {myValue: {require: true,}},data() {return {value: this.myValue,callback: () => {this.$emit("handleChange", this.value)}}},methods: {changeAge() {this.value.age--this.callback()},changeName() {this.value.name += '~'this.callback()}}
}</script>

结果

二、通过v-model

单个props

父组件

<template><div class="test p-8"><div class="header p-8"><el-button type="primary" @click="myValue++">增加</el-button>{{myValue}}</div><div class="container mt-8"><inner-compv-model="myValue"/></div></div>
</template><script>
import InnerComp from "./innerComp";export default {name: "test",components: {InnerComp},data() {return {myValue: 10}}
}

子组件

<template><div class="innerComp p-8"><el-button type="danger" @click="value--">减少</el-button>{{ value }}</div>
</template><script>
export default {name: "innerComp",model: {prop: "myValue",event: "change"},props: {myValue: {require: true,type: Number,default: 11}},computed: {value: {get() {return this.myValue},set(val) {this.$emit("change", val)}}},
}

对象类型的props

父组件

<template><div class="test p-8"><div class="header p-8"><el-button type="primary" @click="myValue.age++">增加</el-button>{{ myValue }}</div><div class="container mt-8"><inner-compv-model="myValue"/></div></div>
</template><script>
import InnerComp from "./innerComp";export default {name: "test",components: {InnerComp},data() {return {myValue: {name: "花生",age: 18}}}
}</script>

子组件

<template><div class="innerComp p-8"><el-button type="danger" @click="value.age--">减少</el-button><el-button type="danger" @click="value.name +='~'">修改名字</el-button>{{ value }}</div>
</template><script>
export default {name: "innerComp",model: {prop: "myValue",event: "change"},props: {myValue: {require: true,}},computed: {value: {get() {return this.myValue},set(val) {this.$emit("change", val)}}},
}</script>

结果

三、通过.sync修饰符

父组件

<template><div class="test p-8"><div class="header p-8"><el-button type="primary" @click="myValue.age++">增加</el-button>{{ myValue }}</div><div class="container mt-8"><inner-comp:myValue.sync="myValue"/></div></div>
</template><script>
import InnerComp from "./innerComp";export default {name: "test",components: {InnerComp},data() {return {myValue: {name: "花生",age: 18}}},
}</script>

子组件

<template><div class="innerComp p-8"><el-button type="danger" @click="changeAge">减少</el-button><el-button type="danger" @click="changeName">修改名字</el-button>{{ value }}</div>
</template><script>
export default {name: "innerComp",props: {myValue: {require: true,}},data() {return {value: this.myValue,}},methods: {changeAge() {this.value.age--this.$emit('update:myValue',this.value)},changeName() {this.value.name += '~'this.$emit('update:myValue',this.value)}}
}</script>

官方提示：

四、provide和inject

官⽹上说provide 和 inject 绑定并不是可响应的。这是刻意为之的。然⽽，如果你传⼊了⼀个可监听的对象，那么其对象的属性还是可响应的。

父组件

<template><div class="test p-8"><div class="header p-8"><el-button type="primary" @click="myValue.age++">增加</el-button>{{ myValue }}</div><div class="container mt-8"><inner-comp/></div></div>
</template><script>
import InnerComp from "./innerComp";export default {name: "test",components: {InnerComp},data() {return {myValue: {name: "花生",age: 18}}},provide(){return{info:this.myValue}}
}</script>

孙子组件

<template><div class="childComp p-8"><el-button type="danger" @click="changeAge">减少</el-button><el-button type="danger" @click="changeName">修改名字</el-button>{{ value }}</div>
</template><script>
export default {name: "childComp",data() {return {value: this.info,}},methods: {changeAge() {this.value.age--},changeName() {this.value.name += '~'}},inject:["info"]
}</script>

【Vue2 组件间数据的双向绑定】相关推荐

Vue中实现父子组件的数据的双向绑定（vue.sync的用法）
项目场景: 前两天日常开发时,遇到需要父子组件双向绑定的问题,出现了一些BUG,但是考虑到组件的可维护性,vue中是不允许子组件改变父组件传的props值的问题描述: 问题场景就是子组件传递数据给父 ...
升级Vue2.0后prop不能双向绑定的解决办法
前言从Vue1.0升级到Vue2.0后,有很多改动,今天来讨论下prop没有了sync之后的解决方法. 从官方角度来讲,为了规范数据流动,砍掉了.sync,目的很明显,阻止子组件影响父组件的数据. ...
vue3数据的双向绑定
vue3关于数据的双向绑定一.script setup 现在,没必要把数据写到data里面,或者是写一个setup函数,再进行return出去. import进来的组件,可以直接在页面中使用,不再需 ...
React入门---事件与数据的双向绑定-9
上一节中,我们是从父组件给子组件传送数据,要实现事件与数据的双向绑定,我们来看如何从子组件向父组件传送数据; 接触之前,我们看一些里面函数绑定的知识: 例:通过点击事件改变state的age属性值: ...
Vue2组件间通信——父传子值props
Vue2组件间通信--父传子值props Vue2中组件间通信系列,本篇是关于父组件向子组件传值的介绍,这里我会用通俗的语言帮助大家理解props配置项功能: 子组件可以接收到父组件传递的数据信息, ...
Vue第二天学习总结—— Vue全家桶之组件化开发(组件化开发思想、组件注册、Vue调试工具用法、组件间数据交互传递、组件插槽、基于组件的案例——购物车)
(一) 组件化开发思想 1. 现实中的组件化思想体现组件化即是对某些可以进行复用的功能进行封装的标准化工作标准:要想组件能够成功组合在一起,每个组件必须要有标准分治:将不同的功能封装到不同的组件 ...
iviewUI组件库中select双向绑定不生效
前端小伙伴们有没有遇到过这样的场景,iviewUI组件库中select双向绑定数据时,修改了绑定值,但是页面中渲染的值还是之前的值,不管是去打印还是使用vue插件去查看变量,均显示绑定值已修改,可是页 ...
三、Vue(组件、组件间数据传递、slot内容分发、vue-router路由、单文件组件、vue-cli脚手架 )
一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码组件是自定义元素(对象) ...
组件间数据交互||父组件向子组件传值-基本使用|| 父组件向子组件传值-props属性名规则
组件间数据交互父组件向子组件传值 1. 组件内部通过props接收传递过来的值 2. 父组件通过属性将值传递给子组件父组件向子组件传值-基本使用 <!DOCTYPE html> < ...

【Vue2 组件间数据的双向绑定】