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

本文主要是介绍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//有新参数到，干活吧。。。
});