1. provide/inject说明
provide 和 inject, 用来实现实现跨组件之间通信. 父子/孙子组件之间任意通信. 在祖先组件中通过provide注入一个依赖,不论组件层次有多深,都可以通过inject 来访问到provide的数据.
2. provide/inject 具体用法:
三个组件: Home组件 - Provide组件 - Sun组件(最底层)
在provide 组件中:
data() {
return {
msg: 'Home组件的msg'
}
},
components: {LeftTop, LeftCenter, ProvideC},
provide() {
return {
grandpaMsg: this.msg
}
},
在sun组件中:
<template>
<div class="Sun">
sun组件
{{ grandpaMsg }}
</div>
</template>
<script>
export default {
data() {
return {
}
},
inject: ['grandpaMsg']
}
</script>
这时页面上就会展示grandpaMsg的值了,但是vue中执行顺序是
data -> provide -> created -> mounted
如果在Home组件中mounted生命周期函数中改变msg的值
mounted() {
this.msg = 'Home组件中msg的值被改变啦'
}
页面还是之前msg的值
这种方法传递过来的数据是没有响应性的，当你改变父组件中的msg时，子组件中接收的grandpaMsg并不会改变。.
官方解释：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。
3. provide/inject 实现响应式
方法一：传递的参数用一个方法返回
父组件:
provide() {
return {
grandpaMsg: () => {
return this.msg
}
}
},
子组件:
<template>
<div class="Sun">
sun组件
{{ grandpaMsg() }}
</div>
</template>
<script>
export default {
data() {
return {
}
},
components: {},
inject: ['grandpaMsg'],
mounted() {
}
}
方法二: 把需要传递的参数定义成一个对象
父组件:
data() {
return {
obj: {
msg: 'Home组件的msg'
}
}
},
components: {LeftTop, LeftCenter, ProvideC},
provide() {
return {
grandpaMsg: this.obj
}
},
mounted() {
this.obj.msg = 'Home组件中msg的值被改变啦'
}
子组件:
inject: ['grandpaMsg'],
使用:文章来源：https://www.toymoban.com/news/detail-595206.html
<div class="Sun">
sun组件
{{ grandpaMsg.msg }}
</div>
这样就实现Provide/Inject响应式数据了.文章来源地址https://www.toymoban.com/news/detail-595206.html
到了这里，关于VUE2中provide 和 inject用法,以及怎么做响应式数据?的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
