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

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>