VueJSのコンポーネント小道具を理解する

Question

私はこれに関するlaracastシリーズのウェブキャストと共にvuejsを試しています。 https://laracasts.com/series/learning-vue-step-by-step/episodes/8では、Jeffery Wayがカスタムコンポーネントについて説明しています。この中

<div id="app"> 
     <tasks list="tasks"></tasks> 
    </div> 

    <template id="tasks-template"> 
     <ul> 
      <li :class="{'completed' : task.c}" @click = "task.c = ! task.c" v-for ="task in tasks">{{task.t}}</li> 

     </ul> 

    </template> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.12/vue.js"></script> 
    <script type="text/javascript"> 

    vue.component('tasks', { 
    template: '#tasks-template', 

    props:['list'] // why not props:['tasks'] ?? 

    }); 

    new Vue({ 
    el: '#app', 
    data: { 
     tasks: [ 
      {t: 'go to doctor', c: false}, 
      {t: 'go to work', c: false}, 
      {t: 'go to store', c: true} 
     ] 

    } 

彼は次のように小道具を設定することについて説明します：私は彼のスクリーンキャストに基づいて、次のコード持って

props:['list'] 

をなぜそれがない

props:['tasks'] ? 

http://vuejs.org/guide/components.html#Propsでは述べています：

すべてのコンプonentインスタンスは独自の独立スコープを持ちます。つまり、子コンポーネントのテンプレート内の親データを直接参照することはできません。データは、props.Aを使用して子コンポーネントに渡すことができます。「prop」は、親コンポーネントから渡されると予想されるコンポーネントのデータのフィールドです。子コンポーネントは、propsオプションを使用して受け取る予定の小道具を明示的に宣言する必要があります。

タスク配列をリストに関連付ける方法はありますか？この場合でも、私は子=コンポーネントと親= vueインスタンスと仮定しますか？

Answer 1

コンポーネントのプロパティはlistとなり、渡される値はtasksです。

これを見てみましょう。まず、あなたの主なVueインスタンスが、識別子#appを持つ要素に（取り付けられている）が付けられています。これがあなたの出発点です。

<div id="app"> 
    <tasks list="tasks"></tasks> 
</div> 

タグがあります。そのタグは、子コンポーネントに対応するので、

子=成分及び親= VUEインスタンス

は正しいです。 <tasks>コンポーネントは、listのように宣言されたプロパティのみを持つVueクラスの拡張です。ここで重要なのはスコープです。 listプロパティはタスクコンポーネントに属し、その宣言に値はなく、テンプレート上に渡された値（#app div内のすべて）は、親Vueインスタンス（Vueインスタンスのdataで宣言されています）に属しています）。だからどうしてprops:['tasks']？ <tasks>コンポーネントにはtasksデータまたはプロパティがないためです。あなたが実際の作業のようなプロパティを宣言した場合、あなたは混乱litleだろう

<div id="app"> 
    <tasks tasks="tasks"></tasks> 
</div> 

を次のようにテンプレートを記述する必要があります。そのため、小道具がlistであり、宣言のためにlist="tasks"があるため、リストのプロパティに親タスク配列の値が含まれていることがコンポーネントによって認識されます。

Answer 2

今Vuejs 2.xがリリースされました。 v-bindを使用して、プロップを動的にバインドすることができます。あなたはまた、彼らのケバブ・ケース（ハイフン区切り）相当を使用する必要がある文字列以外のテンプレートを使用した場合、そう、あなたが注意を払う必要があることの一つは、HTML属性は大文字と小文字を区別しないということであるhttps://vuejs.org/v2/guide/components.html#Dynamic-Props

を参照することができます名前を支えるキャメル記法。例えば

Vue.component('child', { 
 
    // camelCase in JavaScript 
 
    props: ['myMessage'], 
 
    template: '<span>{{ myMessage }}</span>' 
 
})

<!-- kebab-case in HTML --> 
 
<child my-message="hello!"></child>

だからあなたのサンプルが

データはどのよう

<div id="app"> 
 
     <tasks v-bind:list="tasks"></tasks> 
 
    </div> 
 

 
    <template id="tasks-template"> 
 
     <ul> 
 
      <li :class="{'completed' : task.c}" @click = "task.c = ! task.c" v-for ="task in tasks">{{task.t}}</li> 
 

 
     </ul> 
 

 
    </template> 
 

 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script> 
 
    <script type="text/javascript"> 
 

 
    vue.component('tasks', { 
 
    template: '#tasks-template', 
 

 
    props:['list'] // why not props:['tasks'] ?? 
 

 
    }); 
 

 
    new Vue({ 
 
    el: '#app', 
 
    data: { 
 
     tasks: [ 
 
      {t: 'go to doctor', c: false}, 
 
      {t: 'go to work', c: false}, 
 
      {t: 'go to store', c: true} 
 
     ] 
 

 
    }