2017-06-10 5 views
0

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

+0

Sie können ein Objekt als Prop zu übergeben, die alle benötigten Schlüssel-Wert-Paare enthält. – wostex

+0

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

Antwort

0

Ok. Ich habe es total vermisst - verwenden Sie einfach v-bind="object"

Verwandte Themen