Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Understanding component props in VueJS

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?

like image 940
user1592380 Avatar asked Jan 13 '16 16:01

user1592380


People also ask

What is difference between props and data in Vue?

So what's the difference between props and data? Data is the private memory of each component where you can store any variables you need. Props are how you pass this data from a parent component down to a child component.

Why we use props in VUE JS?

Props can be a crucial concept to understand when working with components in Vue. Props, which stands for properties, enable us to pass data and functionality from one component to another.

What is the purpose of components in VueJS?

Vue Components are one of the important features of VueJS that creates custom elements, which can be reused in HTML. Let's work with an example and create a component, that will give a better understanding on how components work with VueJS.

Are Vue props required by default?

All props are optional by default, unless required: true is specified. An absent optional prop other than Boolean will have undefined value. The Boolean absent props will be cast to false .


2 Answers

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

One thing you need to pay attention is that HTML attributes are case-insensitive, so when using non-string templates, camelCased prop names need to use their kebab-case (hyphen-delimited) equivalents. Eg

Vue.component('child', {
  // camelCase in JavaScript
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'
})
<!-- kebab-case in HTML -->
<child my-message="hello!"></child>

So your sample can change to 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}
        ]

    }
like image 106
yuxiaomin Avatar answered Oct 10 '22 10:10

yuxiaomin


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

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

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

inside of your div you have a <tasks> tag. That tag correspond to a child component, so

child = component and parent = the vue instance

Is correct. The <tasks> component is an extension of the Vue class, which has only a property declared like list. The important thing here are scopes. Notice that the list property belongs to the tasks components, and has no value in its declaration, and the value passed to it on the template (everything inside the #app div) belongs to the parent Vue instance (declared on the data of the Vue instance). So why don't props:['tasks']? Because the <tasks> component has no tasks data or property. if you actually declared the property like tasks, you would have to write your template as follows

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

that would be a litle confusing. So thats why the prop is list and because of the declaration list="tasks" is that the component know that the list property has the value of the parent tasks array.

like image 32
Yerko Palma Avatar answered Oct 10 '22 10:10

Yerko Palma