Vue中provide和inject 用法

网友投稿 252 2022-09-25

Vue中provide和inject 用法

1.概念

成对出现:provide和inject是成对出现的

作用:用于父组件向子孙组件传递数据

使用方法:provide在父组件中返回要传给下级的数据,inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。

使用场景:由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据

2.简单来说

provider/inject:简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量

需要注意的是这里不论子组件有多深,只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。

父组件定义:

12345678910

​<script>​​​​export​​​​default​​​​{​​​​  ​​​​// 父组件通过provide将自己的数据以对象形式传出去​​​​  ​​​​provide(){​​​​    ​​​​return​​​​{​​​​      ​​​​parentValue:​​​​"我是父组件的值啊"​​​​    ​​​​}​​​​  ​​​​}​​​​};​​​​</script>​

子孙组件接受方式:

123456789101112

​<script>​​​​export​​​​default​​​​{​​​​  ​​​​// inject:["parentValue"], // 使用一个注入的值作为数据入口:​​​​  ​​​​inject:{​​​​    ​​​​// 使用一个默认值使其变成可选项​​​​    ​​​​parentValue: { ​​​​// 健名​​​​      ​​​​from: ​​​​'parentValue'​​​​, ​​​​// 来源​​​​      ​​​​default​​​​: ​​​​'parentValue'​​​​// 默认值​​​​    ​​​​}​​​​  ​​​​}​​​​}​​​​</script>​

不论子组件有多深

1.概念

成对出现:provide和inject是成对出现的

作用:用于父组件向子孙组件传递数据

使用方法:provide在父组件中返回要传给下级的数据,inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。

使用场景:由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据

2.简单来说

provider/inject:简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量

需要注意的是这里不论子组件有多深,只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。

父组件定义:

12345678910

​<script>​​​​export​​​​default​​​​{​​​​  ​​​​// 父组件通过provide将自己的数据以对象形式传出去​​​​  ​​​​provide(){​​​​    ​​​​return​​​​{​​​​      ​​​​parentValue:​​​​"我是父组件的值啊"​​​​    ​​​​}​​​​  ​​​​}​​​​};​​​​</script>​

子孙组件接受方式:

123456789101112

​<script>​​​​export​​​​default​​​​{​​​​  ​​​​// inject:["parentValue"], // 使用一个注入的值作为数据入口:​​​​  ​​​​inject:{​​​​    ​​​​// 使用一个默认值使其变成可选项​​​​    ​​​​parentValue: { ​​​​// 健名​​​​      ​​​​from: ​​​​'parentValue'​​​​, ​​​​// 来源​​​​      ​​​​default​​​​: ​​​​'parentValue'​​​​// 默认值​​​​    ​​​​}​​​​  ​​​​}​​​​}​​​​</script>​

不论子组件有多深

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:营销案例精选:故宫600周年新logo,碰瓷天猫?
下一篇:angular框架的面试题集锦
相关文章

 发表评论

暂时没有评论,来抢沙发吧~