父向多个子，传数据（静态，动态）

1.传数据，静态

---

父组件

<template>
  <h3>父组件</h3>
  <Son></Son>
</template>

<script>
import Son from  "@/components/Son";
export default {
    name:"App3",
    components:{
        Son
    },
    data(){
      return {
        age: 16
      }
    },
    provide(){ 
        //向后代提供数据
      return {
        // 当前组件想要向后代传递的数据
        age:this.age
      }
    }
}
</script>

子组件

<template>
  <h3>儿子组件</h3>
  

  <!-- <Sun :age="age"></Sun> -->
</template>

<script>
export default {
    name:"Son",
    components:{
        // Sun
    },
    inject:["age"]  //接收数据  		
   //其它方式, 与props一样
}
</script>

2.传数据，动态

---

父组件

<template>
  <h3>父组件</h3>
  <Son></Son>
</template>

<script>
import Son from  "@/components/Son";
import {provide, ref, reactive} from "vue"; //1.引入组合式API

export default {
    name:"App",
    components:{
        Son
    },
    data(){
      return {
       
      }
    },
    setup(){ 
      //this指向undefined,而不是组件实例
      //放到响应式api转换
      //动态基础类型：用ref，动态引用类型，用reactive

      let age = ref(250);  
      let obj = reactive({
        name:"对象数据"
      });

      //数据传给，后代组件
      provide("age", age); 
      provide("obj", obj); 

      return { //将数据暴露给vue，作为vue的当前组件数据
        age
      }
    }
}
</script>

子组件

<template>
  <h3>儿子组件</h3>
  年龄{{age}}  <br>
  {{obj.name}}
  {{obj.tag}}
  <hr>
  <Sun></Sun>
</template>

<script>
import Sun from  "@/components/Sun";
//引入接收inject
import {inject} from "vue";
export default {
    name:"Son",
    components:{
        Sun
    },
    setup(){
      // 接收
      let age = inject("age");

      // let {value} = inject("age");
      let obj = inject("obj");
      
      
      //将数据暴露给vue，作为vue的当前组件数据
      return {
        age,
        obj
      }
    }
}
</script>

孙子组件

<template>
  <h3>孙子组件</h3>
  {{age}}
</template>

<script>
//使用方式和前面，子组件一样
import {inject} from "vue";
export default {
    name:"Sun",
    setup(){
     
      let age = inject("age");
      
      return {
        age
      }
    }
}
</script>