Понимание компонентов реквизита в VueJS

Question

Я пытаюсь vuejs, следуя вместе с серией веб-трансляций laracasts об этом. В 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 говорится:

Каждый comp Onent-экземпляр имеет свою изолированную область видимости. Это означает, что вы не можете (и не должны) напрямую ссылаться на родительские данные в шаблоне дочернего компонента. Данные могут передаваться дочерним компонентам с использованием реквизита. «Подсказка» - это поле данных компонента, которое, как ожидается, будет передано из его родительского компонента. Детский компонент должен явно объявлять реквизиты, которые он ожидает получить, используя опцию реквизита:

Как этот компонент знает, чтобы связать массив задач со списком? Также в этом случае я предполагаю, что child = component и parent = экземпляр vue?

Answer 1

Свойство на вашем компоненте называется list, а значение, переданное ему, равно tasks.

Давайте посмотрим на это. Сначала у вас есть свой основной экземпляр Vue прилагается (установлен) к элементу с идентификатором #app. Итак, это ваша отправная точка.

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

Внутри вашего div у вас есть тег <tasks>. Этот тег соответствует компоненту ребенка, так

ребенок = компонент и родитель = вю экземпляр

правильно. Компонент <tasks> является расширением класса Vue, который имеет только свойство, объявленное как list. Здесь важны области. Обратите внимание, что свойство list принадлежит компонентам задач и не имеет значения в его объявлении, а значение, переданное ему в шаблоне (все внутри поля #app) принадлежит к экземпляру родительского экземпляра Vue (объявленному в data экземпляра Vue). Так почему же не props:['tasks']? Поскольку <tasks> не имеет tasks данных или имущества. если вы на самом деле объявлен собственностью, как задачи, вы должны написать свой шаблон следующим образом

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

, который был бы Лил в заблуждение. Таким образом, почему prop является list, и из-за объявления list="tasks" заключается в том, что компонент знает, что свойство list имеет значение массива родительских задач.

Answer 2

В настоящее время выпущен Vuejs 2.x. Вы можете использовать v-bind для динамического связывания реквизита.Вы также можете обратиться к https://vuejs.org/v2/guide/components.html#Dynamic-Props

Следует обратить внимание на то, что атрибуты HTML не чувствительны к регистру, поэтому при использовании нестрочных шаблонов именам camelCased prop необходимо использовать их эквиваленты кебаба (дефисграничные) , Например

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} 
 
     ] 
 

 
    }