了解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中,它声明:

每个组件实例都有自己独立的范围.这意味着您不能(也不应该)直接引用子组件模板中的父数据.可以使用prop将数据传递给子组件."prop"是组件数据上的一个字段,预计将从其父组件向下传递.子组件需要使用props选项显式声明它希望接收的道具:

组件如何知道将tasks数组与列表相关联？同样在这种情况下我假设child = component而parent = vue实例？

Answer 1

调用组件上的属性,list并传递给它的值tasks.

我们看看这个.首先,将主Vue实例附加(装入)到具有标识符的元素#app.所以这是你的出发点.

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

你的div里面有一个<tasks>标签.该标记对应于子组件,因此

child = component and parent = vue实例

是正确的.该<tasks>组件是Vue类的扩展,它只有一个声明为的属性list.这里重要的是范围.请注意,该list属性属于tasks组件,并且其声明中没有值,并且在模板#app上传递给它的值(div 内的所有内容)都属于父Vue实例(在Vue实例上声明data).那么为什么不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道具名称需要使用kebab-case（连字符分隔）的等效项。例如

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

    }