首页 文章

了解VueJS中的组件道具

提问于
浏览 次
8

我正在尝试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实例？

javascript vue.js

2 回答

  • 4

    组件上的属性称为 list ，传递给它的值为 tasks .

    我们看看这个 . 首先，将主Vue实例附加（装入）到标识符为 #app 的元素 . 所以这是你的出发点 .

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

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

    child = component和parent = vue实例

    是正确的 . <tasks> 组件是Vue类的扩展，它只有一个声明为 list 的属性 . 这里重要的是范围 . 请注意 list 属性属于tasks组件，并且其声明中没有值，并且在模板上传递给它的值（ #app div中的所有内容）都属于父Vue实例（在Vue实例的 data 上声明） ） . 那么为什么不 props:['tasks'] ？ Because the <tasks> component has no tasks data or property . 如果您确实将属性声明为任务，则必须按如下方式编写模板

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

    这会让人感到困惑 . 这就是为什么prop是 list 并且由于声明 list="tasks" ，组件知道list属性具有父任务数组的值 .

    回复于
  • 8

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

    }
    回复于

相关问题