快速理解Vue父子组件传值

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_35616850/article/details/100899441

组件化开发是目前前端开发必备的开发技能，组件化开发可以大大提高开发效率

今天整理一下Vue的父子组件传值方式，方便还没有理解的朋友学习。

1、父组件向子组件传值

<!-- 父组件 -->
<!-- 父组件调用子组件，看成是调用子组件函数，给子组件传值，就是给函数传参数 -->
<template>
	<div>
		<!-- 传递动态值前面加个冒号: -->
		<!-- 传递静态值就不需要冒号 -->
		<childComponent
			:msg="msg1"
		/>
	</div>
</template>
<script>
import childComponent from "./child.vue";//引入组件
export default{
	components:{
		childComponent//注册组件
	},
	data(){
		return{
			msg1:"你好"
		}
	}
}
</script>

<!-- 子组件 -->
<!-- 把子组件看成一个函数，props里面就是子组件接受的参数 -->
<template>
	<div>
		{{msg}}
	</div>
</template>
<script>
export default{
	props:{
		msg:{
			type:String,
			default:"1"
		}
	}
}
</script>

2、子组件向父组件传值

<!-- 父组件 -->
<!-- 子组件向父组件传值就不一样了，需要用到$emit和$on -->
<!-- 父组件监听函数使用@后面接上函数名 -->
<template>
	<div>
		<!-- 传递动态值前面加个冒号: -->
		<childComponent
			@eventName="handleEvent"
		/>
	</div>
</template>
<script>
import childComponent from "./child.vue";//引入组件
export default{
	components:{
		childComponent//注册组件
	},
	methods:{
		handleEvent(data){//监听子组件触发的函数，data为子组件给父组件传的值
			console.log(data);
		}
	}
}
</script>

<!-- 子组件 -->
<!-- 把子组件看成一个函数，props里面就是子组件接受的参数 -->
<template>
	<div>
		<button @click="triggerEvent">给父组件传值</button>
	</div>
</template>
<script>
export default{
	data(){
		msg:"给父组件的信息"
	},
	methods:{
		triggerEvent(){
			this.$emit("eventName",this.msg);//第一个参数是触发的事件名称，对应着父组件@监听的名字，第二个参数是传给父组件的额外参数，传递多个参数可以直接传对象过去。
		}
	}
}
</script>

大致讲解如上，个人理解都在备注里面了，如果有没有讲清楚的或者其他不懂的请留言，我会回复各位并更新博客的，以便后面读者阅读！