目录
0x00 局部通信：
0x01 如果父组件下有多个子组件，且数量未知，如何方便通知所有子组件呢?
0x03 全局的监听和通讯：
只能在当前组件下使用
<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>上面我们可以看到，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>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>
