Vue中provide和inject 用法

 

1.概念

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

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

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

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

2.简单来说

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

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

父组件定义:

1 2 3 4 5 6 7 8 9 10 <script> export default {   // 父组件通过provide将自己的数据以对象形式传出去   provide(){     return {       parentValue:"我是父组件的值啊"     }   } }; </script>

子孙组件接受方式:

1 2 3 4 5 6 7 8 9 10 11 12 <script> export default {   // inject:["parentValue"], // 使用一个注入的值作为数据入口:   inject:{     // 使用一个默认值使其变成可选项     parentValue: { // 健名       from: 'parentValue'// 来源       default'parentValue' // 默认值     }   } } </script>

不论子组件有多深

上一篇:setup中使用Provide和 Inject 传递数据


下一篇:Vue provide/inject 使用