如題。在vue項目中，如果祖宗想將參數傳遞給孫子甚至更小一輩的組件，是一件麻煩事。可以通過爺爺-兒子-孫子-曾孫這樣的鏈條，一輩輩地傳承下去，但未免太繁瑣、太蠢了些；也可以通過store間接傳送，但如何觸發孫子們去獲取是個問題。

第三種方法是通過provider和inject方式。老祖宗provider，后代inject。在以下示例中，祖宗頁面將一個json對象傳給孫輩。其中，祖宗provider一個函數，函數返回一個json對象state。孫輩inject該函數，接收傳遞過來的state，并監聽里面的元素state.now。當state.now變化時，將重新獲取整個state，以達到老祖宗與孫輩持續刷新參數并傳遞的目的。

1、祖宗頁面

grandFather.vue

<template><div><input type="text" v-model="state.param1" /><input type="text" v-model="state.param2" /><input type="text" v-model="state.param3" /></div><div><input type="button" value="傳送參數" @click="sendParams" /></div>
</template><script setup>
import { reactive, provide, ref } from "vue";const state = reactive({param1:0,param2:0,	param3:0,	now: 0,
});const getParams = ref(() => {return state;
});
provide("sensorTjParams", getParams);function sendParams(){state.now = Date.now();//將當前時間賦給state.now，利于孫子監聽state.now，一旦變化，說明有新參數傳來。
}
</script>

2、孫子頁面

grandSon.vue

//getParams()可以獲取到爺爺的整個state變量。
const getParams = inject("sensorTjParams", ref({ now: 0 }));/** 特別注意爺爺傳過來的state.now()*/
const windVane = computed(() => {return getParams.value().now;
});watch(windVane, () => {//監聽state.now//有新參數到，干活吧。。。
});

3、小結

1）上例中，provide與inject的，是函數

2）孫輩通過computed，特別關注傳遞過來的json對象的其中一個元素now

3）監聽這個now

4）當祖宗想通知孫輩刷新參數時，只須改變這個now的值