浅谈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解决或其他办法处理。

相关文章
|
7月前
|
JavaScript
Vue中的provide和inject适用于哪些场景?
Vue中的provide和inject适用于哪些场景?
108 0
|
7月前
|
JavaScript
Vue中的provide和inject的使用场景是什么?
Vue中的provide和inject的使用场景是什么?
205 3
|
7月前
|
JavaScript 开发者
Vue中provide和inject的作用是什么?
Vue中provide和inject的作用是什么?
88 0
|
7月前
Vue3 跨组件传参 provide 与 inject
Vue3 跨组件传参 provide 与 inject
|
21天前
|
JavaScript
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性,在处理一些复杂的组件间通信问题时,可以提供一种灵活的解决方案。通过合理使用它们,可以帮助我们更好地避免`v-model`的循环引用问题,提高代码的质量和可维护性。
32 1
|
2月前
|
API
vue3知识点:provide 与 inject
vue3知识点:provide 与 inject
36 4
vue3知识点:provide 与 inject
|
21天前
|
存储 JavaScript 数据管理
除了provide/inject,Vue3中还有哪些方式可以避免v-model的循环引用?
需要注意的是,在实际开发中,应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时,要综合考虑代码的可读性、可维护性和性能等因素,以确保系统的稳定和高效运行。
21 1
|
7月前
Vite 使用inject/provide
Vite 使用inject/provide
104 0
|
7月前
|
JavaScript
VUE组件: Vue中的provide和inject是用来做什么的?
VUE组件: Vue中的provide和inject是用来做什么的?
105 0
|
JavaScript API
vue组件通讯之provide / inject
vue组件通讯之provide / inject
66 0