Ich bin ziemlich neu in VueJS. In Reaktion können Sie leicht Ruhe-Params für die Weitergabe von Requisiten an Kinder verwenden. Gibt es ein ähnliches Muster in Vue?VueJS übergeben alle Requisiten an Kind-Komponente
Betrachten Sie diese übergeordnete Komponente, die ein paar Kinder Komponenten:
<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
}
}
...
Was Ich mag es nicht, dass die Stützen mit dem Schlüssel config
oder jedem anderen beliebigen Schlüssel mit dem Namen-angeordnet sind. Die Texteingabe-Komponente (nicht gezeigt) ist ein verklärtes input
Feld, das eine Anzahl von Attributen annehmen kann. Ich könnte die Requisiten abflachen, wenn die Komponente erstellt wird, aber ist das im Allgemeinen eine gute Idee?
Ich bin überrascht, diese Frage wurde nicht zuvor gestellt.
Danke.
Edit: 10-06-2017
Verwandte: https://github.com/vuejs/vue/issues/4962
Sie können ein Objekt als Prop zu übergeben, die alle benötigten Schlüssel-Wert-Paare enthält. – wostex
Das ist was ich bin habe ich hier illustriert. Der Schlüssel ": Config" ist der Prop-Schlüssel für das Kind. Was ich nicht will. – Simon