Question

我通过跟随laracasts系列的网络直播来尝试vuejs。在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动态绑定props。您也可以参考https://vuejs.org/v2/guide/components.html#Dynamic-Props

您需要注意的一件事是HTML属性不区分大小写，因此在使用非字符串模板时，camelCased prop名称需要使用它们的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}
        ]

    }

了解VueJS中的组件道具

2 个答案: