Question

当我尝试从父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-with和v-component，但对它们没有任何乐趣：http://optimizely.github.io/vuejs.org/guide/composition.html

Answer 1

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

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

你现在在做什么：

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

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

Vue将数据传递给组件

1 个答案: