vue3使用provider+ inject直接将参数由祖宗传送给孙子

如题。在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的值