1. prop 只可以从上一级组件传递到下一级组件（父子组件），即所谓的单向数据流。

2. emit 绑定一个自定义事件, 当这个语句被执行时, 就会将参数 arg 传递给父组件,父组件通过 v-on 监听并接收参数

3. 三、provide/ inject 适用于孙子组件 Provide/ inject 是 vue2.2.0 新增的 api, 简单来说就是父组件中通过 provide 来提供变量, 然后再子组件中通过 inject 来注入变量。

import {provide} from 'vue' setup() { provide('location', 'North Pole') provide('geolocation', { longitude: 90, latitude: 135 }) },

组合式 inject

setup() { const location = inject('location') const geolocation = inject('geolocation')

return {
  location,
  geolocation
}

}

4. expose / ref 父子组件： 父组件获取子组件的属性或者调用子组件方法

// Child.vue
<script setup>
  // 方法二 适用于Vue3.2版本, 不需要引入
  import { defineExpose } from "vue"
  defineExpose({
      childName: "这是子组件的属性",
      someMethod(){
          console.log("这是子组件的方法")
      }
  })
</script>

// Parent.vue  注意 ref="comp"
<template>
  <child ref="comp"></child>
  <button @click="handlerClick">按钮</button>
</template>
<script setup>
  import child from "./child.vue"
  import { ref } from "vue"
  const comp = ref(null)
  const handlerClick = () => {
      console.log(comp.value.childName) // 获取子组件对外暴露的属性
      comp.value.someMethod() // 调用子组件对外暴露的方法
  }
</script>

5. attrs attrs：包含父作用域里除 class 和 style 除外的非 props 属性集合

6. mitt

Vue3 中没有了 EventBus 跨组件通信，但是现在有了一个替代的方案 mitt.js，原理还是 EventBus

7. 兄弟组件通信 event bus