實現跨層組件通信（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值。