vue非父子组件间通信

非父子组件间通信主要有两种一种是Provide和Inject，另一种是Mitt全局事件总线

Provide和Inject用于和子孙组件间通信

无论层级结构有多深，父组件都可以作为其所有子组件的依赖提供者
父组件有一个provide 选项来提供数据；
子组件有一个inject 选项，来开始使用这些数据；
下面上代码：
在父组件中定义provide定义数据

<template>
  <div>
    <home></home>
  </div>
</template>

<script>
import home from "./home.vue"
  export default {
    provide(){
      return{
        name:"ws",
      age:18,
      length:this.list.length
      }
    },
    components:{
      home
    },
    data(){
    return{
      list:[1,2,3,4,5,6,7,8]
    }
    }
  }
</script>

<style scoped>

</style>

在孙子组件使用

<template>
  <div>
    <h2>{{name}}-{{age}}-{{length}}</h2>
  </div>
</template>

<script>
  export default {
    inject:["name","age","length"]
  }
</script>

<style scoped>

</style>

注意：父组件里面的provide是对象形式是不能使用this拿取当前组件data里面的数据的。如果要使用data里面的数据可以使用函数形式。

Mitt全局事件总线可以在在任何组件间通信

vue3从实例中移除了$on，$off，$once方法，所以如果我们希望继续使用全局事件总线，要通过第三方库，
vue3官网推荐我们使用mitt或者tiny-emitter
使用Mitt:
首先安装Mitt第三方库：npm install --save mitt
然后在utils文件夹下创建js文件，引入mitt

import mitt from 'mitt'
export const emitter3 = mitt()

可以在组件中引入使用

<template>
  <div>
    <H2>about</H2>
    <Home></Home>
  </div>
</template>

<script>
import Home from '@/04_事件总线的使用/Home'
import {emitter3} from '../../utils/eventBus'
  export default {
    created(){
      emitter3.on('why',(indo)=>{
        console.log(indo)
      })
    },
    components:{
      Home
    }
  }
</script>

在另一个组件中：

<template>
  <div>
     <button @click="btnClick">点击按钮发送</button>
    <h2>孙子组件</h2>
  </div>
</template>

<script>
import {emitter3} from '../../utils/eventBus'
  export default {
    methods:{
      btnClick(){
        console.log("about按钮的点击")
        emitter3.emit('why',{name:19,age:18})
      }
    }
  }
</script>

发送 emitter3.emit(‘why’,{name:19,age:18})
监听：通过 emitter3.on(‘why’,(indo)=>{
console.log(indo)
})