我希望接收父组件绑定到子组件的所有 prop ,而不在props:[]
中提及,因为我不知道将绑定哪些 prop 。
父组件
<template>
<div id="parentComponent">
<child-component v-bind="anyPropsToPass"></child-component>
</div>
</template>
<script>
import ChildComponent from './components/child-component/child-component'
export default {
name: 'app',
components: {
ChildComponent
},
data () {
return {
anyPropsToPass: {
name: 'John',
last_name: 'Doe',
age: '29',
}
}
}
}
</script>
子组件
<template>
<div>
<p>I am {{name}} {{last_name}} and i am {{age}} old</p>
<another-child v-bind="$props"></another-child> <!-- another child here and we pass all props -->
</div>
</template>
<script>
import AnotherChild from "../another-child/another-child";
export default {
components: {AnotherChild},
props: [], // I know if I mentioned props here I can receive but it's unknown, I
//just want to pass it down until it received in right component to use
created() {
console.log("Props", this.$props);
// Gets null
// Expected : anyPropsToPass Object
}
}
</script>
如果在子元素的 prop 中提到了 prop ,那么它就起作用了,但是应该有一些方法来知道哪些是从父元素传递或绑定的 prop ,即使我们对子元素不感兴趣。
例如:工作正常!
子组件
<template>
<div>
<p>I am {{name}} {{last_name}} and i am {{age}} old</p>
<another-child v-bind="$props"></another-child>
</div>
</template>
<script>
import AnotherChild from "../another-child/another-child";
export default {
components: {AnotherChild},
props: ['name', 'last_name'],
created() {
console.log("Props", this.$props);
// Gets expected props here
}
}
</script>
3条答案
按热度按时间7vhp5slm1#
您可以使用
this.$attrs
获取所有v绑定属性,包括未声明的属性。vlf7wbxs2#
使用
this.$attrs
应该可以做到这一点Child.vue:
5f0d552i3#
向下钻取属性是一个不好的模式,它可能会导致不一致,尝试使用provide/inject模式将数据从祖父组件传递到孙组件:
在孙组件中: