Vue.js 进阶技巧Day02 $on 与 $emit （局部通信、父组件通知所有子组件、全局监听和通讯）

目录

0x00 局部通信：

0x01 如果父组件下有多个子组件，且数量未知，如何方便通知所有子组件呢?

0x03 全局的监听和通讯：

---

0x00 局部通信：

只能在当前组件下使用

<template>
	<div class='container p-5'>
		<button class='btn btn-success' @click='test'>
			点击通讯
		</button>
		<demo-item></demo-item>
	</div>
</template>

<script>
	import demoItem from './demo-item.vue'
	export default {
		components:{
			demoItem
		},
		mounted(){
			//开启一个监听事件
			this.$on('test',(e)=>{
				console.log(e)
			})
		},
		methods:{
			test(){
				//通知test事件
				this.$emit('test',{
					value:'点击通讯'
				})
			}
		}
	}
</script>

<style>
</style>

demo-item.vue 子组件中用 this.$on 来监听 是监听不到的

<template>
	<div>
		<h1>{{msg}}</h1>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				msg:"我是子组件"
			}
		},
		mounted(){
			this.$on('test',(e)=>{
				this.msg = e.value;
			})
		}
	}
</script>

<style>
</style>

0x01 如果父组件下有多个子组件，且数量未知，如何方便通知所有子组件呢?

上面我们可以看到，this.$emit 和 this.$on 可以实现在同一个组件中的通讯（虽然没有什么卵用），但是如果通过依赖注入，

将父组件的 this 通过provide 暴露出来，然后在子组件中通过 inject 接收，那么在子组件中就可以调用父组件的$on

从而实现 子组件 和 父组件之间的通讯。这种方式有两大好处：

1. 不管两个组件之间有多少层，依赖注入都可以实现通信 （跨组件通信）

2.不管父组件中有多少个同类子组件，可以实现一键通知

<template>
	<div class='container p-5'>
		<button class='btn btn-success' @click='test'>
			点击通讯
		</button>
		<!-- 如果父组件中有多个子组件，且数量未知，如何随时通知任何子组件呢 -->
		<demo-item></demo-item>
		<demo-item></demo-item>
		<demo-item></demo-item>
	</div>
</template>

<script>
	import demoItem from './demo-item.vue'
	export default {
		provide(){
			return {
				$_demo:this
			}
		},
		components:{
			demoItem
		},
		mounted(){
			//开启一个监听事件
			this.$on('test',(e)=>{
				console.log(e)
			})
		},
		methods:{
			test(){
				//通知test事件
				this.$emit('test',{
					value:'点击通讯'
				})
			}
		}
	}
</script>

<style>
</style>

<template>
	<div>
		<h1>{{msg}}</h1>
	</div>
</template>

<script>
	export default{
		inject:['$_demo'],z
		data(){
			return {
				msg:"我是子组件"
			}
		},
		mounted(){
			this.$_demo.$on('test',(e)=>{
				this.msg = e.value;
			})
		}
	}
</script>

<style>
</style>

0x03 全局的监听和通讯：

app.vue: 将this通过provide 暴露出来

<template>
	<div class='container p-5'>
		<!-- $emit $on案例 -->
		<demo-on-emit></demo-on-emit>
		<button class='btn btn-danger' @click="clickEvent">app.vue点击事件</button>
	</div>
</template>

<script>
	import demoOnEmit from './components/on-emit/demo.vue';
	export default{
		provide(){
			return {
				$_app:this
			}
		},
		components:{
			demoOnEmit
		},
		data(){
			return {
				
			}
		},
		methods:{
			clickEvent(){
				this.$emit('test',{
					value:"我是app.vue的点击事件"
				})
			}
		}
	}
</script>

<style>
	
</style>

demo.vue 依赖注入 ，接受app.vue的this

<template>
	<div>
		<demo-item></demo-item>
		<demo-item></demo-item>
		<demo-item></demo-item>
		<!-- 全局监听通讯 -->
	</div>
</template>

<script>
	import demoItem from './demo-item.vue'
	export default {
		inject:['$_app'],
		components:{
			demoItem
		},
		mounted(){
			//开启一个全局的监听事件
			this.$_app.$on('test',(e)=>{
				console.log('------demo-----')
				console.log(e)
			})
		},
		methods:{

		}
	}
</script>

<style>
</style>

demo-item.vue 依赖注入，接受app.vue的this

<template>
	<div>
		<h1>{{msg}}</h1>
	</div>
</template>

<script>
	export default{
		inject:['$_app'],
		data(){
			return {
				msg:"我是子组件"
			}
		},
		mounted(){
			this.$_app.$on('test',(e)=>{
				console.log('----demo-item----')
				this.msg = e.value;
			})
		}
	}
</script>

<style>
</style>