实现跨层组件通信（Vue3___defineComponent）

常用的父子组件通信方法：

 //父组件
 <template>
   <my-header :title="title" @changeTitle="changeTitle"></my-header>
 </tempale>
 <script>
   import myHeader from "@/components/Header.vue"; //引入组件
   export default {
   data(){
    return{
     title:"父传子测试"
    }
   },
   components:{ 
     "my-header":myHeader  
    },
    methods:{
      changeTitle(val){
       this.title = val
      }
    }
   }
 </script>
 
 //子组件 myheader.vue
 <template>
   <h1>{{ title }}</h1>
   <button @click="triggerMethod">触发父组件方法</button>
 </tempalte>
 <script>
  export default{
     props: {//接收父组件出来的title
        title:{
         type: String,
         default: ""
        }
     }, 
     methods:{
      triggerMethod:function(){
       this.$emit("changeTitle","传参数");  //子组件通过$emit 与父组件通信  
      }
     }
  }
 </script>
 

 

provide/inject（提供/注入），可以实现跨层组件（祖孙）间通信，不需要将数据一层一层向下传递：

//父组件 Father.vue
<template>
  <son></son>
</template>
<script>
 import { defineComponent, reactive, provide, computed } from "vue";
 import son from "@/components/Son";
 export default defineComponent({
  components: {
    son
  },
  setup() {
   let params = reactive({
      name: "来自父亲的参数"
   })
   provide("name", computed(()=> params.name)); //用计算属性返回值能够动态传递来子/孙组件（当子孙组件通过方法触发修改name值时）
   function changeName(val){
     params.name = val; //子孙组件触发
   }
   provide("changeName",changeName);
  }
 })
</script>

//儿子组件 Son.vue
<template>
  <h2>{{ name }}</h2>  
  <button @click="changeName('儿子组件触发')">儿子组件触发Name修改</button>
  <div class="grandson">
    <grandson></grandson>
  </div>
</template>
<script>
import grandson from "@/components/grandson";
import { defineComponent, inject } from "vue";
export default defineComponent({
  components: { grandson },
  setup() {
    let name = inject("name");  //接收Father组件传来的name
    let changeName = inject("changeName"); //接收方法
    return {
      name,
      changeName,
    };
  },
});
</script>

//孙子组件 grandson.vue
<template>
  <h2>{{ name }}</h2>
  <button @click="changeName('孙子组件触发')">孙子组件触发Name修改</button>
</template>
<script>
import { defineComponent, inject, watch } from "vue";
export default defineComponent({
  name: "HelloWorld",
  setup() {
    let name = inject("name");
    let changeName = inject("changeName");
    watch(name,(newValue,oldValue)=>{
      //这里可以监听name的变化
    })
    return {
      name,
      changeName,
    };
  },
});
</script>

子孙组件都接收到Father组件传来的参数"来自Father组件的参数"。

当点击儿子组件或者孙子组件按钮时，触发changeName事件在Father组件上修改name值。