provide: 哪个组件需要抛出数据,在哪个组件抛出
inject:哪个组件需要注入在哪里注入
1 爷爷组件(grandpa.vue)
{{ message }}
{{ grandPa.message1 }}
{{ age }}
import Parent from '@/component/Parent.vue'
export default{
component:{
Parent
},
//提供要抛出的数据(孙子组件需要使用)
provide(){
return{
message:this.message,
grandPa:this.grandPa,
age:()=>this.age //属性以函数形式返回,实时变化
}
},
data(){
return{
message:'我是爷爷组件数据1',
grandPa:{//可以响应对象...
message1:'我是爷爷组件数据2'
},
age:19,
}
},
methods:{
changeMessage(){
//provide/inject默认不是响应式数据,爷爷的数据改了,孙子数据不会发生改变。
this.message = '我是更改过后的数据'
this.grandPa.message1 = '我是更改过后的数据111'
this.age = 20;
}
}
}
2 父亲组件(father.vue)
(父子组件和 爷孙组件通信一样)
import grandson from '@/component/grandson.vue'
export default{
component:{
grandson
},
data(){
return{
}
}
}
3 孙子组件(grandson.vue)
{{ message }}
{{ grandPa.message }}
{{ newage }}
export default{
data(){
return{
}
},
computed:{
//age 是以函数形式返回,所以以函数方式作为处理
newage(){
return this.age();
}
},
//和data数据使用一样
inject:['message','grandPa','age'],
methods:{
getGrandpa(){
//不发生响应的
console.log(this.message)
//发生响应的
console.log(this.grandPa.message)
}
}
}