浅谈Vue2中provide和inject使用

简介: 浅谈Vue2中provide和inject使用

上面这段话出自官方,内容也比较好理解,就是通常数据传递一层,我们使用prop就可以很好的解决,如果传递多层,再使用prop就不是很好的方案,这时需要provide和inject


1 provide

在 provide 中指定要传递给子孙组件的数据。

provide: {
  data: '给子孙的数据'
},

复制

如果我们尝试提供一些组件实例 property

data() {
  return {
    data:"给子孙的数据"
  }
},
provide() {
  return {
    data: this.data
  }
},

复制


2 inject

子孙组件通过inject注入祖父组件传递过来的数据。

data() {
  return {}
},
inject: ['data'],

复制

可以看出是个数组,所以里面可以注入多个,另一种方式就是直接一个变量接

const data= inject('data')

复制


3 总结

官方其实不推荐在应用程序代码中直接使用,因为数据追踪比较困难,不知道那一层级声明了 provide 又或是哪些层级使用了 inject 。造成比较大的维护成本。因此,除组件库或高阶插件外,Vue建议用Vuex解决或其他办法处理。

相关文章
|
5月前
|
JavaScript
Vue中的provide和inject适用于哪些场景?
Vue中的provide和inject适用于哪些场景?
88 0
|
5月前
|
JavaScript
Vue中的provide和inject的使用场景是什么?
Vue中的provide和inject的使用场景是什么?
92 3
|
5月前
|
JavaScript 开发者
Vue中provide和inject的作用是什么?
Vue中provide和inject的作用是什么?
53 0
|
5月前
|
JavaScript
vue3的警告问题 [Vue warn]: inject() can only be used inside setup() or functional components. 怎么解决?
vue3的警告问题 [Vue warn]: inject() can only be used inside setup() or functional components. 怎么解决?
282 5
|
5月前
|
JavaScript 前端开发
vue3中使用jsx报错React is not defined和h is not defined
vue3中使用jsx报错React is not defined和h is not defined
515 0
|
5月前
Vite 使用inject/provide
Vite 使用inject/provide
75 0
|
5月前
|
JavaScript
VUE组件: Vue中的provide和inject是用来做什么的?
VUE组件: Vue中的provide和inject是用来做什么的?
54 0
|
5月前
|
JavaScript 前端开发 API
Vue 3.0 组合式API provide/inject
Vue 3.0 组合式API provide/inject
50 0
|
JavaScript API
vue组件通讯之provide / inject
vue组件通讯之provide / inject
50 0
vue3依赖注入 provide inject
vue3依赖注入 provide inject
98 0
vue3依赖注入 provide inject