vue中使用provide和inject时要注意的问题

1、provide发送数据时一点要写在最外层别写在方法里,不然它的孙子组件inject不到

2、要想要provide和inject的数据支持响应式,那么我们就发送ref或reactive包起来的数据

爷爷组件写:

const dtcParams = ref({});

provide('dtcParams', dtcParams);

这里注意是provide('dtcParams', dtcParams);而不是provide('dtcParams', dtcParams.value);

孙子组件写:

const data = inject('dtcParams');

console.log(data.value, '我看看data');

这里注意在使用时用data.value而不是直接用data

以上就能实现数据响应式在爷孙组件传递,比如dtcParams的值在爷爷组件修改了,孙子组件data的值也会响应式变化。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容