0
点赞
收藏
分享

微信扫一扫

在Vue3中使用Provide / Inject

前面已经讲了浅谈Vue2中provide和inject使用,今天讲讲在Vue3中如何使用provide和inject

Vue3的写法已经和Vue2有所不同,因此需要熟悉Vue3的写法,其实变动不大,现在官方文档也有详细介绍,有兴趣的可以去了解.

1 使用 Provide

在 setup() 中使用 provide 时,我们首先从 vue 显式导入 provide 方法。这使我们能够调用 provide 时来定义每个 property。

provide 函数允许你通过两个参数定义 property:

  1. property 的 name (<String> 类型)
  2. property 的 value

import&nbsp;{&nbsp;provide&nbsp;}&nbsp;from&nbsp;&quot;vue&quot;;
export&nbsp;default&nbsp;{
&nbsp;&nbsp;setup()&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;provide(&quot;data&quot;,&nbsp;&quot;给子孙的数据&quot;);
&nbsp;&nbsp;}
};

上面这种方式传递String类型,还可以传递对象类型

import&nbsp;{&nbsp;provide&nbsp;}&nbsp;from&nbsp;&quot;vue&quot;;
export&nbsp;default&nbsp;{
&nbsp;&nbsp;setup()&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;provide(&quot;data&quot;,&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data1:&nbsp;&quot;给子孙的数据1&quot;,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data2:&nbsp;&quot;给子孙的数据2&quot;
&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;}
};

使用 inject

在 setup() 中使用 inject 时,还需要从 vue 显式导入它。一旦我们这样做了,我们就可以调用它来定义如何将它暴露给我们的组件。

inject 函数有两个参数:

  1. 要注入的 property 的名称
  2. 一个默认的值 (可选)

import&nbsp;{&nbsp;inject&nbsp;}&nbsp;from&nbsp;&quot;vue&quot;;
export&nbsp;default&nbsp;{
&nbsp;&nbsp;setup()&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;data&nbsp;=&nbsp;inject(&quot;data&quot;);
&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data
&nbsp;&nbsp;&nbsp;&nbsp;};
&nbsp;&nbsp;}
};

设置默认值

import&nbsp;{&nbsp;inject&nbsp;}&nbsp;from&nbsp;&quot;vue&quot;;
export&nbsp;default&nbsp;{
&nbsp;&nbsp;setup()&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;data&nbsp;=&nbsp;inject(&quot;data&quot;,&nbsp;&quot;我是默认值&quot;);
&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data
&nbsp;&nbsp;&nbsp;&nbsp;};
&nbsp;&nbsp;}
};

3 总结

基本用法和Vue区别不大,熟悉Vue2的可以直接上手。


举报

相关推荐

0 条评论