I'm trying out vuejs by following along with the laracasts series of webcasts on this. In 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 the props as follows:
props:['list']
Why is it not
props:['tasks'] ?
In http://vuejs.org/guide/components.html#Props it states:
Every component instance has its own isolated scope. This means you cannot (and should not) directly reference parent data in a child component’s template. Data can be passed down to child components using props.A “prop” is a field on a component’s data that is expected to be passed down from its parent component. A child component needs to explicitly declare the props it expects to receive using the props option:
How does the component know to associate the tasks array with list? Also in this case I assume child = component and parent = the vue instance?
