【vue3】vue3 setup如何使用provide和inject？

您所在的位置：网站首页 › fir签名 › 【vue3】vue3 setup如何使用provide和inject？

【vue3】vue3 setup如何使用provide和inject？

2023-04-27 17:42| 来源: 网络整理| 查看: 265

setup是一个组件选项，在组件被创建之前，props 被解析之后执行。它是组合式 API 的入口。他接受两个参数：

{Data} props {SetupContext} context

通常情况下，我们用props把数据传递给子组件，子组件通过emit把数据传递给父组件。但是当层级比较多的时候，比如祖先组件和重孙组件需要传递数据，而中间的那些组件不需要，用props和emit就显得有些繁琐了，这时候我们可以用provide和inject。provide提供一个具有名字的变量传递给子孙组件，子孙组件用inject接收同名变量，就能够使用了。区别于选项模式，在setup中，我们要手动引入provide和inject，话不多说，直接上示例。

父组件index.vue：

import { ref,provide } from "vue" import InjectTest from './injectTest.vue' export default { components:{InjectTest}, setup(){ //创建hello变量 const hello = ref("hello world") //传递给子组件的变量message，值是hello变量 //这里也可以直接传递一个值，比如provide("message","hello wrold") provide("message",hello) //一个用来修改hello变量的函数 const changeProvide = (val:string)=>{ hello.value = val } //把修改hello变量的函数，传递给子组件 provide("changeProvide",changeProvide) //在父组件中修改hello变量，2秒后可以看到页面上子组件的数据也发生了变化。 setTimeout(()=>{ hello.value = "你好,世界" },2000) return { } }, }

子组件injectTest.vue：

import { inject } from 'vue' export default { setup(){ //接收父组件变量message const injectMessage = inject("message") //接收父组件修改message的函数changeProvide，可以在子组件修改父组件provide变量 const changeProvide = inject("changeProvide") //其实对于响应式变量和对象来说，子组件也可以直接修改父组件的变量， //但是建议不要这样修改，如果这个provide有很多子组件在用， //那么通过子组件修改变量的值，会让维护变得异常麻烦。 const changeMessage = ()=>{ injectMessage.value = '66666666666' } return { injectMessage, changeProvide, changeMessage } } } {{injectMessage}} inject 按钮

通过子组件的注释，咱们了解到，尽量不要用子组件直接修改provide的值，如果从父组件出发就想禁止子组件修改的话，咱们可以引入readonly，修改父组件index.vue的两行代码：

import { ref,provide,readonly } from "vue" provide("message",readonly(hello))

这个时候，provide的值对于子组件来说，就是只读的，子组件不能直接修改provide变量，但是可以通过父组件传递给子组件的方法去修改，例如上边的子组件，changeProvide方法可以修改，但是changeMessage方法不能修改。

下边是setup语法糖的inject代码，provide同理，因为都是引入的provide和inject，语法糖和setup选项没有什么不同，除了不用return函数或者变量。

语法糖子组件injectTest.vue：

import { inject } from 'vue' const injectMessage = inject("message") const changeProvide = inject("changeProvide") const changeMessage = ()=>{ //injectMessage.value如果红线报错的话，可以这样写 (injectMessage as any).value = '66666666666' } {{injectMessage}} inject 按钮

有帮助的话，点个赞呗！关于vue3的一切疑问，大家可以在评论区留言提问。

上一篇：vue3 setup如何使用props？下一篇：vue3 setup如何使用computed？

【本文地址】

【vue3】vue3 setup如何使用provide和inject？

【vue3】vue3 setup如何使用provide和inject？

今日新闻

推荐新闻