VUE3-实现祖先与后代组件的数据通信（18）

祖先组件App.vue

<template>
  <div class="app">
    <h1>这是祖先组件。{
   
   { name }}---{
   
   { price }}</h1>
    <ChildComponent></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from "@/components/ChildComponent";
import {
     
     provide, reactive} from "vue";

export default {
     
     
  name: 'App',
  components: {
     
     
    ChildComponent
  },
  setup() {
     
     
    const car = reactive({
     
     name: '奔驰', price: '40W'})
    provide('car', car)

    return {
     
     
      ...car
    }
  }
}
</script>

<style>
.app {
     
     
  background-color: gray;
  padding: 10px;
}
</style>

孩子组件ChildComponent.vue

<template>
  <div class="child">
    <h1>这是孩子组件</h1>
    <GrandsonAssembly></GrandsonAssembly>
  </div>
</template>

<script>
import GrandsonAssembly from "@/components/GrandsonAssembly";

export default {
     
     
  name: "ChildComponent",
  components: {
     
     
    GrandsonAssembly
  }
}
</script>

<style scoped>
.child {
     
     
  background-color: skyblue;
  padding: 10px;
}
</style>

孙子组件GrandsonAssembly.vue

<template>
  <div class="son">
    <h1>这是孙子组件。{
   
   { car.name }}---{
   
   { car.price }}</h1>
  </div>
</template>

<script>
import {
     
     inject} from "vue";

export default {
     
     
  name: "GrandsonAssembly",
  setup() {
     
     
    const car = inject('car')
    console.log(car) //祖先传的是响应式数据，这里接的也是响应式数据

    return {
     
     
      car
    }
  }
}
</script>

<style scoped>
.son {
     
     
  background-color: orange;
  padding: 10px;
}
</style>

结果