Understanding prop components in VueJS

Question

I try voyages, following along with a series of laracasts webcasts about it. At https://laracasts.com/series/learning-vue-step-by-step/episodes/8 Jeffery Way discusses custom components. I have the following code based on his screencast:

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

In this, he discusses setting props as follows:

  props:['list'] 

Why is it not

 props:['tasks'] ? 

Http://vuejs.org/guide/components.html#Props says:

Each component instance has its own isolated scope. This means that you cannot (and should not) directly reference parent data in the template of child components. Data can be transferred to child components using details. "Prop" is the component data field, which is expected to be passed down from its parent component. The child component must explicitly declare the details that it expects to receive using the attribute option:

How does a component know to associate an array of tasks with a list? Also in this case, I assume that child = component and parent = instance of vue?

Answer 1

The property on your component is called list , and the value passed to it is tasks .

Let's look at that. First you have your main Vue instance attached to (connected) to the element with the identifier #app . So this is your starting point.

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

inside your div there is a <tasks> . This tag corresponds to a child component, therefore

child = component and parent = vue instance

Correctly. The <tasks> component is an extension of the Vue class, which has only the property declared as list . Areas are important here. Note that the list property belongs to task components and does not matter in its declaration, and the value passed to it in the template (everything inside div #app ) belongs to the parent Vue instance (declared in the Vue instance data ). So why not props:['tasks'] ? Because the <tasks> component has no data or tasks properties . if you really declared the property as tasks, you will need to write your template as follows

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

which would be confusing. Therefore, therefore, prop list and because of the declaration of list="tasks" is that the component knows that the list property has the value of an array of parent tasks.

Answer 2

Now released Vuejs 2.x. You can use v-bind to dynamically link props. You can also refer to https://vuejs.org/v2/guide/components.html#Dynamic-Props

One thing you need to pay attention to is that HTML attributes are not case sensitive, so when using patterns other than string, camelCased camel names must use their kebab equivalents (hyphenated). For example,

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

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

So your sample may change below

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