如何从HTML设置组合属性(如composed_prop.foo
)?
normal_prop设置得很好但是composition_prop.foo没有设置。
示例:
<div id="app">
<sample normal_prop=1 composed_prop.foo=1 />
</div>
<script>
Vue.component('sample',{
props: {
normal_prop: 0,
composed_prop: {
default:{
foo: 0,
bar: 0
}
}
}
})
new Vue({
el: "#app"
})
</script>
答案 0 :(得分:2)
你必须这样做:
<div id="app">
<sample normal_prop=1 :composed_prop="{foo:10, bar:20}" />
</div>
请注意,您必须绑定composed_prop,以便计算表达式(而不是将其视为文字字符串)。另请注意,传入composed_prop的对象将完全覆盖您的默认值 - 它不会尝试将属性与默认值合并。因此,如果您只传入{foo:10}
,那么composed_prop.bar
将是未定义的。
最后一点说明......我认为Object prop的默认值应该是工厂函数。像这样:
Vue.component('sample',{
props: {
normal_prop: 0,
composed_prop: {
type: Object,
default:function(){ // should be a function
return { foo: 0, bar: 0 };
}
}
}
})