我对 VueJS 很陌生。在反应中,您可以轻松地使用休息参数将道具传递给孩子。 Vue中是否有类似的模式?
考虑这个有几个子组件的父组件:
<template>
<header class="primary-nav">
<search-bar :config="searchBar"><search-bar>
// ^^^^ this becomes the key on the props for SearchBar
header>
</template>
export default {
data(){
return {
... a few components ...
searchBar : {
model: '',
name: 'search-bar',
placeholder: 'Search Away',
required:true,
another: true
andanother: true,
andonemoreanotherone:true,
thiscouldbehundredsofprops:true
}
}
}
}
<template>
<div :class="name">
<form action="/s" method="post">
<input type="checkbox">
<label :for="config.name" class="icon-search">{{config.label}}</label>
<text-input :config="computedTextInputProps"></text-input>
//^^^^ and so on. I don't like this config-dot property structure.
</form>
</div>
</template>
export default {
props: {
name: String,
required: Boolean,
placeholder: String,
model: String,
},
computed: {
computedtextInputProps(){
return justThePropsNeededForTheTextInput
}
}
...
我不喜欢的是道具是用键 config
或任何其他任意键命名的。文本输入组件(未显示)是一个美化的 input
字段,它可以采用许多属性。我可以在创建组件时展平道具,但这通常是个好主意吗?
我很惊讶这个问题以前没有被问过。
谢谢。
编辑:10-06-2017
相关: https ://github.com/vuejs/vue/issues/4962
原文由 Simon 发布,翻译遵循 CC BY-SA 4.0 许可协议
父组件
子组件
上述组件内的另一个子组件