本文主要是介绍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的值
这篇关于vue3使用provider+ inject直接将参数由祖宗传送给孙子的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
