Vue3实现非父子组件通信

父传子接：props
子传父接：$emit发送自定义事件，注意在vue3中要在emits选项中定义自定义事件

vue3中取消了$on,$off,$once, 不能使用事件总线的方式了

方式一：provide/inject

定义要发送的数据：provide
定义接收的数据：inject

// 父组件传递数据
  provide: {
    msg: "我是小仙女",
    emotion: "超级开心"
  }

//接收数据的组件
inject:['msg','emotion']

注意：provide中定义的数据不能在本组件中使用

一般provide最好写成一个函数返回一个对象，可以获取到data中的数据。要想provide中数据变成响应式的，用computed包裹。

import {computed} from 'vue'

// 向非父组件传递数据
  provide() {
    return {
      msg: "我是小仙女",
      emotion: "超级开心",
      numsLength: computed(() => this.nums.length)
    };
  },
 data() {
    return {
      nums: [1, 2, 3],
    };
  },

方式二：使用mitt库

安装mitt

npm install mitt

封装一下，文件utils/mitt.js

import mitt from "mitt";
const bus = mitt()
export default bus

层级关系：subChild1<Child1 <App.vue
App.vue和subChild1通信

App.vue 传递数据

<template>
  <child1></child1>
  <button @click="send">send</button>
</template>

<script>
import Child1 from "./Child1.vue";
import bus from "./utils/mitt";
export default {
  components: {
    Child1
  },
  data() {
      return {
          message:'你好吖'
      }
  },
  methods: {
    send() {
      bus.emit("send", this.message);//发送数据
    }
  }
};
</script>

subChild1.vue 接收数据

<template>
  <div>{{text}}</div>
</template>

<script>
import bus from './utils/mitt'
export default {
    name:'SubChild1',
    data() {
        return {
            text:''
        }
    },
    created() {
        bus.on('send',(data) =>{// 接收数据
            this.text = data
        })
    },
}
</script>

发送数据：bus.emit('‘事件类型”，数据)
接收数据：bus.on(’'事件类型”，回调函数)