vue3非父子组件通信，provide/inject、全局事件总线

一、provide / inject

在一些比较深的嵌套组件中，子组件想要获取父组件的部分内容，就会比较麻烦

• provide 来提供数据
• inject使用数据

// 父组件通过provide提供数据
<script>
  import Home from './Home.vue';
  export default {
    provide: {
        name: "李华",
        age: 18,
    },
    data() {},
    methods: {}
  }
</script>


// 在其嵌套的子组件使用数据
<template>
  <div>
    {{name}} - {{age}}
  </div>
</template>

<script>
  export default {
    // 接收父组件传递的数据
    inject: ["name", "age"],
  }
</script>

二、全局事件总线 mitt 库

1、安装 npm install mitt

2、我们可以封装一个工具 eventBus.js

import mitt from 'mitt'
const emitter = mitt();
export default emitter;

3、使用，在一个组件中发射事件，另一个组件监听

// 发射事件
<template>
  <button @click="addEvent" />
</template>

// 导入封装好的eventBus.js
import emitter from './eventBus'
<script>
  export default {
    methods: {
    	addEvent() {
    		// 通过emit 发射事件， 第一个参数为事件名称，第二个为参数
    		emitter.emit('aaa', {name: 'zhangsan', age: 18})
    	}
    }
  }
</script>



// 监听事件组件
import emitter from './eventBus'
<script>
  export default {
    created() {
    	// 通过 on来监听事件
    	emitter.on('aaa', (info) => {
    		console.log(info)
    	})
    }
  }
</script>

mitt事件取消

 // 取消所有的监听
 emitter.all.clear()

// 取消某一个
function fun1() {}
emitter.on('foo', fun1)
emitter.off('foo', fun1)