Vue中provide和inject 用法

网友投稿 254 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框架的面试题集锦
相关文章

 发表评论

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