提示: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>
结语
在 父组件上 运用 (provide)后代需要的数据, 后代任一 一代 注入(inject)对于key的数据,便可以取到,如果想要响应式,那么只需要 在父组件身上 provide 数据是以对象的形式即可,这样你在父组件对此对象的改变会和后代使用同步,当然,后代对此对象的改变也会同步体现在父组件身上。
vue组件传值方式
- Vuex
- Bus
- 父子传值:props 和 $emit、ref和$parent
- 隔代传值:provide/inject、v-bind=“$attrs”
「三年博客,如果觉得我的文章对您有用,请帮助本站成长」
共有 0 条评论 - provide/inject隔代组件传值(祖先组件传给其任意后代元素)