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'],
使用:
<div class="Sun">
sun组件
{
{
grandpaMsg.msg }}
</div>
这样就实现Provide/Inject响应式数据了.