vue3中祖孙组件之间的通信provide和inject

一、在vue3中新增的祖孙之间通信的方式

provide和inject是Vue中的两个相关功能，它们一起提供了一种祖孙组件之间共享数据的方式。父组件可以使用provide来提供数据，而子孙组件可以使用inject来接收这些数据。

二、使用

父组件中部分代码

<script>
import { provide, reactive, toRefs } from "vue";
import ChildVue from "./components/ChildVue.vue";
export default {
  name: "App",
  components: {
    ChildVue,
  },
  setup() {
    let car = reactive({
      name: "奔驰",
      price: "40w",
    });

    provide('car',car) //给自己的后代传递数据

    return {
      ...toRefs(car)
    }
  },
};
</script>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

孙组件中部分代码

<script>
import { inject, toRefs } from 'vue'
export default {
name:'SonVue',
setup(){
  //使用 inject 获取祖先组件传递的数据
  let car = inject('car')

  return {
    ...toRefs(car)
  }
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15