vue子组件接收父组件的传值并修改

原创于 2021-08-19 16:11:13 发布 · 935 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了Vue中父子组件间的数据通信，包括单个属性值的传递与更新，以及通过对象传递多个属性值的方式。在子组件中，使用props接收并修改属性值，然后通过$emit触发更新。父组件则利用.sync修饰符实现属性同步。

1、单个属性值

//  子组件：
<template>
	<div>
		{{ val }}
	</div>
</template>
<script>
	name:'Child'
	props:{
		val:String
	}
	methods:{
		change(el){
			// el是改变后的值
			this.$emits("update:val",el)
		}
	}
</script>

//  父组件：
<template>
	<Child :val.sync="value"></Child>
</template>
<script>
	data(){
		return{
			value:0,
		}
	}
</script>

2、多个属性值（放在对象里直接传进来）

// 子组件：
<template>
	<div>
		{{ obj }}
	</div>
</template>
<script>
	props:{
		obj:{
			type:Object,
			default(){
				return {}
			}
		}
	}
</script>

//  父组件：
<template>
	<Child :obj="object"></Child>
</template>
<script>
	data(){
		return{
			object:{
				name:'张三'
			},
		}
	}
</script>