provide/inject隔代组件传值（祖先组件传给其任意后代元素）

2020-11-15 分类：VUE 作者：管理员阅读（391）

提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。如果传入的值是字符串，数字，布尔值等基本类型则会无响应！！！

爷传孙（所有后代组件都能拿到该值，但传动态值必须是个对象！！！）

Parent

<template>
<section>

<Son :dt.sync="dt" :name="name" :age="age" :gender="gender" :job="job" @isClick="isClick" @add="add" @upRocket="getData"></Son>

<input type="text" v-model="name">
<input type="text" v-model="age">
<input type="text" v-model="gender">
<input type="text" v-model="job">
<input type="text" v-model="obj.msg">
<input type="text" v-model="dt.a">
</section>
</template>

<script>
import Son from './Son';
export default {
data() {
return {
name: '李四',
age: '18',
gender: '男',
job: '程序员',
obj:{
msg:'爱你哟'
},
dt:{
a:1
}
}
},
provide(){
return {
data:this.obj
}
},
components: {
Son
},
methods: {
add() {
console.log('parent 的 add 方法')
},
isClick() {
console.log('parent 的 isClick 方法')
},
getData(data){
console.log('接收孙子发来的数据',data)
}
}
};
</script>

Son

<template>
<section>
<div class="mt-10">
<grandchildren v-bind="$attrs" v-on="$listeners" />
</div>
{{name}}
{{age}}
son=> {{data.msg}}
{{dt}}
</section>
</template>

<script>
import grandchildren from './Grandchildren';
export default {
components: {
grandchildren
},
inject:['data'],
props: {
dt:{
type: Object
},
name: {
type: String,
default: 'default'
},
age: {
type: String,
default: 'default'
}
}
};
</script>

Grandchildren

<template>
<section>
<div>
{{ $attrs['job'] }} 在$attrs里面只会有props没有注册的属性
<br>
<p>bottom 性别=> {{ $attrs['gender'] }}</p>
<p>bottom 工作=> {{ $attrs['job'] }}</p>

<button @click="sendData">传递给爷爷的数据</button>
Grandchildren=>{{data.msg}}
<input type="text" v-model="data.msg">
</div>
</section>
</template>

<script>
export default {
name:'grandchildren',
data(){
return {

}
},
inject:['data'],
mounted() {

console.log(this.$parent.$parent);
console.log(this.$listeners);
// this.$listeners.isClick();
// this.$listeners.add();
},
methods:{
sendData(){
this.$emit("upRocket",'来自孙子的数据');
}
}
};
</script>