VueJSはすべての小道具を子コンポーネントに渡します

Question

私は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フィールドである。コンポーネントが作成されたときに小道具を平らにすることができましたが、それは一般的には良いアイデアですか？

私はこの質問が以前に尋ねられていないことに驚いています。

ありがとうございました。

編集：2017年10月6日

関連：https://github.com/vuejs/vue/issues/4962

Answer 1

[OK]をクリックします。 v-bind="object"