vue中的组件之间通信思路（子传父）

组件之间的通信分为三种父组件给子组件传值，子组件给父组件传值，兄弟组件之间传值。

 

下面介绍

2.子组件给父组件传值

子组件通过自定义事件this.$emit('myEven',传递的参数)

例如

<template>
	<view>
		<!-- 使用父组件传递的message -->
		{{message}}
		<button @click="sendMessageToFather"></button>
	</view>
</template>

<script>
	export default {
		name:"test",
		data() {
			return {
				message:"给父组件传递的消息"
			};
		},
		methods:{
			sendMessageToFather(){
				// 子组件给父组件传递值，通过自定义事件
				this.$emit('myEven',this.message)
			}
		},
		//接受父组件传递的参数，props与data同级
		props:['message']
	}
</script>

<style>

</style>

父组件通过监听自定义事件来接收参数

例如

<template>
	<!-- 父子组件传值 test为子组件 title就是要传给子组件的值 -->
	<test :message="message" @myEven></test>
</template>

<script>
	// 引用组件
	import test from '../../components/componentsTest.vue'
	
	export default {
		data() {
			return {
				message:"这是父组件给子组件传递的参数"
			}
		},
		onLoad() {

		},
		methods: {
			myEven(message){
				// message就是 子组件传递的值
				console.log(message)
			}
		},
		// 使用组件
		components:{
			test
		}
	}
</script>

<style>

</style>