Vue将数据传递给组件

时间:2017-01-06 11:12:06

标签: vue-component vue.js

当我尝试从父Vue对象向其传递数据时,我的子Vue组件始终返回undefined

以下是我定义组件的方法:

var Candidates = Vue.extend({
            template: '#candidateTable',
            props: ['candidates'],
            data: function () {
                return {
                    show: true,
                    columns: [],
                    reverse: false,
                    filters: {}
                }
            }
        });

然后我像这样实例化父Vue对象:

   new Vue({
            components: {
                'Candidates': Candidates,
            },
            el: '#examGroups',
            data: {
                candidates: data.students,
                componentsArray: ['Candidates']
            }           
    }

然后模板是

<script type="text/template" id="candidateTable">
<table :is="candidates">
</table>
<!--- header etc -->
<tbody v-if="show === true">
     <tr v-for="candidate in candidates"
         :candidates="candidates">.....
</script>

但是当我在浏览器中检查Vue对象时,该元素具有候选属性,但它是undefined

任何帮助表示赞赏

在此处找到一些其他文档:建议在模板上使用v-withv-component,但对它们没有任何乐趣:http://optimizely.github.io/vuejs.org/guide/composition.html

1 个答案:

答案 0 :(得分:2)

您需要在根Vue实例模板中实例化“Candidates”组件,然后专门将数据传递给该实例。换句话说,您的模板应该具有以下内容:

<candidates :candidates="candidates"></candidates>

你现在在做什么:

<tr v-for="candidate in candidates"
     :candidates="candidates">

只是将候选数据对象提供给<tr>元素的实例 - 而不是候选组件。