vue内父子组件通信、事件传递及多层嵌套组件如何传递事件

父子组件通信

父组件向子组件传值 - props

组件A

<template>
	<div>
		<b :option="option"></b>
	<div>
</template>
<script>
import B from "b";
export default {
	components:{
		B
	},
	data(){
		return {
			option:[]
		}
	}
}
</script>

组件B

<template>
	<div>
		--
	<div>
</template>
<script>
export default {
	name:"B",
	props:{
		option: Object,
      	default() {
        	return {};
      	}
	},
	data(){
		return {}
	}
}
</script>

父组件通过props向子组件传值，子组件通过props接收值，当父组件没有传某个值时，可以通过props设定默认值，子组件未收到父组件传递的值时，会采用默认的值。

子组件向父组件传递事件&值

看如下示例代码：

组件A

<template>
	<div>
		<b :option="option" @simpleClick = "simpleClick"></b>
	<div>
</template>
<script>
import B from "b";
export default {
	components:{
		B
	},
	data(){
		return {
			option:[]
		}
	},
	methods:{
		simpleClick(){
			console.log("--simpleclick--");
		}
	}
}
</script>

组件B

<template>
	<div>
		<button v-on:click="simpleClick">按钮</button>
	<div>
</template>
<script>
export default {
	name:"B",
	props:{
		option: Object,
      	default() {
        	return {};
      	}
	},
	data(){
		return {}
	},
	methods:{
		simpleClick(){
			this.$emit("simpleClick");
		}
	}
}
</script>

如上示例所示，子组件 $emit传递事件供在父组件中调用，并且在父组件的事件触发上，来自某子组件$emit发射而来的事件只会在子组件元素身上触发。
在vue中，$emit是个比较常用的东西。
当我们需要子组件向父组件传递某个值时，也可以通过 $emit。

如下：

组件A

<template>
	<div>
		<b :option="option" @simpleClick = "simpleClick"></b>
	<div>
</template>
<script>
import B from "b";
export default {
	components:{
		B
	},
	data(){
		return {
			option:[]
		}
	},
	methods:{
		simpleClick(param){
			console.log(param.eventData,params.itemData);
		}
	}
}
</script>

组件B

<template>
	<div>
		<button v-on:click="simpleClick(eventData)">按钮</button>
	<div>
</template>
<script>
export default {
	name:"B",
	props:{
		option: Object,
      	default() {
        	return {
				itemData:"show"
			};
      	}
	},
	data(){
		return {}
	},
	methods:{
		simpleClick(eventData){
			this.$emit("simpleClick",{
				eventData:eventData,
				itemData:this.itemData
			});
		}
	}
}
</script>

例子比较简单，理解起来也比较容易！
下面看一个场景：当上下两层组件引用，父子组件间传值&事件使用props & $emit可以轻松解决，当上下组件嵌套引用3层以上时，子组件使用 $emit向上发射特定事件，只能由该组件的上一级组件接收到，再上一级或多级的组件则无法接收。此时需要用到 $attrs 和 $listeners， $attrs 和 $listeners用在嵌套的中间组件身上，最外层接收组件即可正常接收内部某级某个组件 $ emit发射而来的特定事件。
看示例：
组件A

<template>
	<div>
		<b :option="option"></b>
	<div>
</template>
<script>
import B from "b";
export default {
	components:{
		B
	},
	data(){
		return {
			option:[]
		}
	}
}
</script>

组件B

<template>
	<div>
		<c :option="option" v-bind="$attrs" v-on="$listeners"></c>
	<div>
</template>
<script>
import C from "c";
export default {
	components:{
		C
	},
	props:{
		option:Object
	}
	data(){
		return {
			option:[]
		}
	}
}
</script>

组件C

<template>
	<div>
		<button v-on:click="simpleClick(eventData)">按钮</button>
	<div>
</template>
<script>
export default {
	name:"C",
	props:{
		option: Object,
      	default() {
        	return {
				itemData:"show"
			};
      	}
	},
	data(){
		return {}
	},
	methods:{
		simpleClick(eventData){
			this.$emit("simpleClick",{
				eventData:eventData,
				itemData:this.itemData
			});
		}
	}
}
</script>

总结：以上是vue props、$emit 、$attrs 和 $listeners的用法，$ attrs 和 $ listeners就是用于多层嵌套组件内子组件向上发射指定事件供外层某个组件调用这类使用场景，用法简易容易上手，本文对概念解读较少，后续补上。