vue父子组件之间双向数据绑定的三种方式(vue2/vue3)

2023-12-18 00:36| 来源: 网络整理| 查看: 265

在做项目的过程中，经常遇到父子组件通信的问题，现在对3种通信方式总结一下：

一、prop向下传递，emit向上传递

初始版本

父组件通过prop将数据传递给子组件，子组件通过emit事件将子组件数据传递给父组件

//父组件来自子组件的数据：{{value}} data() { return { value: '父组件的数据' } }, methods:{ getChildData(v){ this.value = v } } //子组件child props:{ value:{ type:String,//在props接受父组件传递数据 default:'' } }, data(){ return { childValue:this.value } }, watch:{ value(){ this.childValue = this.value //监听父组件的数据，同步更新子组件数据 } }, methods:{ childInputChange(){ this.$emit('getChildData',this.childValue) // 通过emit触发getChildData，将子组件数据传递给父组件 } 二、v2.2.0+ 新增 v-model 通过v-model属性实现 //父组件 // 等价于默认给子组件传递参数value,子组件更新函数名update:value // 在子组件中可以通过model配置 //接受数据的名字fatherValue和触发事件的方法childValueChange 父子组件同步的数据：{{value}} data() { return { value: '父组件的数据' } } //子组件child export default { name: "child", model: { // 定义model prop: 'fatherValue', // 父组件v-model绑定的值传递给props中的fatherValue event: 'childValueChange' // 通过emit触发childValueChange将内部值传递给父组件v-model绑定的值 }, props: { fatherValue: String // 接受父组件传递的值 }, data(){ return { childValue: this.fatherValue// 关联值 } }, methods: { childInputChange(){ // 通过$emit触发childValueChange（model内定义）事件，将内部值传递给给父组件 this.$emit('childValueChange', this.childValue) } } }

vue3允许写多个v-model,vue2不允许写多个v-model

//父组件 // 等价于默认给子组件传递两个值value1、value2 // 子组件更新函数update:value1将接受到的参数赋值给dValue1 // 子组件更新函数update:value2将接受到的参数赋值给dValue2 data() { return { dValue1: '父组件的数据1', dValue2: '父组件的数据2' } } 三、sync修饰符（v2.3.0+ 新增） // 父组件我是父子组件之间同步的数据{{data}} data(){ return { data:'我是来自父组件的数据' } } //子组件 props:{ data:{ default:'', type:String } }, data(){ return { childData:this.data //关联父组件的值 } }, watch:{ data(){ this.childData = this.data } }, methods:{ childDataChange(v){ this.$emit('update:data',v) // 触发update:data将子组件值传递给父组件 } }

vue3取消了.sync这种语法，使用v-model:title 语法代替

// 父组件我是父子组件之间同步的数据{{data}} // 父组件传递给子组件title属性(默认使用value) // 通过update:title(默认使用update:value) 方法将子组件传递的值赋值给data data(){ return { data:'我是来自父组件的数据' } } //子组件 {{title}} props:{ title:{ default:'', type:String } }, methods:{ childDataChange(v){ this.$emit('update:title',v) // 触发update:data将子组件值传递给父组件 } }

【本文地址】

公司简介

联系我们