我希望将对象中的所有属性都传递为props
,并使用v-bind
而无需参数。
但是如何在不必在子组件中声明道具的情况下获得孩子的props
?
例如,在下面的代码中, item
是一个对象。
父组件:
<div v-for="item in domArr" :key="item.id">
<cus-dom v-bind="item"></cus-dom>
</div>
子组件:
<script>
export default {
name: 'cusDom',
props: [], // HOW TO GET THE props, because I have it empty/no arguments HERE?
data() {
return {};
},
mounted() {
}
}
</script>
答案 0 :(得分:1)
即使使用v-bind
,您仍然必须将其声明为props
。
如果不这样做,他们将是$attrs
。
请参阅下面的演示,并明确说明。
Vue.component('child', {
props: ['a'],
template: `<button @click="go">PROPS AND ATTRS</button>`,
mounted() {
this.go()
},
methods: {
go() {
console.log(
'$attrs:', JSON.stringify(this.$attrs), '- $props:', JSON.stringify(this.$props),
'- a:', this.a, '- b:', this.b)
}
}
});
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
stuff: {a: 1, b: 2}
}
})
<script src="https://unpkg.com/vue@2.5.16/dist/vue.min.js"></script>
<div id="app">
<p>{{ message }}</p>
<child v-bind="stuff"></child>
</div>