大家都知道在vue2中组件通信无非就以下几种方式：

1、父子组件使用props/$emit或$attrs/$listener进行数据交互，多层级组件可以使用inject/provide
2、组件间通信可以采用事件总线机制new Vue()，创建一个空的vue使用全局的$on和$emit
3、使用vuex状态管理

vue3中通信也无外乎上述几种方式，只是在vue3中的具体实现方式不同

父子组件通信

props/$emit的区别

在vue3中使用$emit需要提前注册

<script setup lang="ts">
  // 注册  
  const emit = defineEmits(['changeValue'])
  
  const callbakc = () => {
    // 使用
    emit('changeValue', params)
  }
</script>

defineEmits 仅在<script setup>下生效，如果使用setup函数参考以下写法：

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  setup (props, { emit }) {
      function clickHandle () {
        let params = {}
        emit('changeValue', params)
      }
      return {
        clickHandle
      }
    }
})

</script>

$attrs/$listener区别

vue3中删除了$listener并且合并到attrs中

<script setup>
import { useAttrs } from "vue";
const attrs = useAttrs()
</script>

事件总线通信

在vue2中通常使用Vue.prototype.$bus = new Vue()来实现事件总线，但在vue3中已经不存在Vue.prototype的写法了，要实现全局变量可以使用app.config.globalProperties 同时vue3中也没有了vm.$on和vm.$emit，所有在vue3中推荐使用mitt三方库来实现事件总线

npm install --save mitt

import mitt from 'mitt'
const emitter = mitt()

// 注册事件
emitter.on('changeEvent', (params) => {})

// 触发事件
emitter.emit('changeEvent', '哈哈哈')

vuex状态管理

vue3中推荐使用pinia来取代vuex进行状态管理。对于使用过vuex的人来说pinia写法差别不到，区别在于pinia使用vue3的组合式APi，具体请查看官方文档