vue2中provide/inject的使用与响应式传值详解
更新时间：2022年09月22日 08:50:59 作者：Min_Fox
Vue中 Provide/Inject实现了跨组件的通信,下面这篇文章主要给大家介绍了关于vue2中provide/inject的使用与响应式传值的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
前言
官网概念：这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。
一、基本用法
在父组件中使用provide传值，在子组件中用inject接收。
// 父组件
data() {
return {
name: "卷儿"
}
},
provide: function() {
return {
name: this.name
}
},
// 子组件 inject: ['name'],
这种方法传递过来的数据是没有响应性的，当你改变父组件中的name时，子组件中接收的name并不会改变。
官方解释：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。
二、响应式
1.方法一：传递的参数用一个方法返回
// 父组件
data() {
return {
name: "卷儿"
}
},
provide: function() {
return {
newName: () => this.name
}
// 子组件
inject: ['newName'],
computed: {
hnewName() {
return this.newName()
}
}
<!-- 子组件中的使用方式 -->
<h2>{{ hnewName }}</h2> <!-- 推荐使用这种方法 -->
<h2>{{ newName() }}</h2>
2.方法二：把需要传递的参数定义成一个对象
官方解释：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。
// 父组件
data() {
return {
obj: {
name: "卷儿"
}
}
},
provide: function() {
return {
// 传递一个对象
obj: this.obj
}
},
// 子组件
inject: ['obj'],
computed: {
// 也可以不用计算属性重新定义
objName() {
return this.obj.name
}
}
<!-- 子组件中的使用方法 -->
<h2>obj的name： {{objName}}</h2>
<h2>obj的name： {{obj.name}}</h2>
总结
主要解决深层次的组件嵌套，祖先组件向子孙组件之间传值。
一层嵌套的父子组件可以使用props来传值，props本身就是有相应性的。
根据自身代码选择合适的传值方式，并不一定非要用provide/inject的传值。
到此这篇关于vue2中provide/inject使用与响应式传值的文章就介绍到这了,更多相关vue2 provide/inject响应式传值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vuex的使用和简易实现，帮助大家更好的理解和使用vuex，感兴趣的朋友可以了解下2021-01-01
本篇文章主要介绍了vue 的keep-alive缓存功能的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要给大家介绍了关于如何利用Vue3+Vite批量导入模块/资源的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了vxe-table如何在单元格中渲染简单的饼图，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue 通过 Prop 向子组件传递数据的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
Vue中ref、reactive、toRef、toRefs、$refs的基本用法总结
这篇文章主要给大家介绍了关于Vue中ref、reactive、toRef、toRefs、$refs的基本用法,以及他们之家的区别,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue router仿天猫底部导航栏功能,需要的朋友可以参考下2017-10-10
TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成,TinyMCE是一个根据LGPL license发布的自由软件,你可以把它用于商业应用,这篇文章主要介绍了Vue 富文本编辑器tinymce的安装教程,需要的朋友可以参考下2023-09-09
vue中的this.$router.push()路由传值方式
这篇文章主要介绍了vue中的this.$router.push()路由传值方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue如何使用mapbox对当前行政区划进行反选遮罩问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论