Question

我刚开始使用Vue.js所以也许我错过了一些明显的东西。为了练习自己，我尝试做一个简单的treeView组件（带有子组件'treeViewItem'）。我在treeView上只有1个属性，它是项目列表：items
这是treeView组件：

@Component
export default class treeView extends Vue {
    @Prop({
        required: true
    })
    items!: treeViewItemOptions[];
}

我像这样初步化'Vue'：

let v = new Vue({
    el: "#app",
    template: `
    <div>
        <tree-view :items="items" />
    </div>
    `,
    data: {
        items: treeViewItems
    }
});

我收到了这个错误：'[Vue警告]：缺少必需的道具：“物品”

我正在使用带有vue-property-decorator的打字稿此外，我正在运行vue 2.5.16和vue-property-decorator 6.0.0

谢谢，

修改1 我尝试使用<treeViewItem>文件中的简单<li>替换treeView.vue：

<template>
    <ul>
        <!-- it works if I replace the following <treeViewItem> for <li> -->
        <treeViewItem v-for="item in items" v-bind:key="item.id" v-bind:item="item"></treeViewItem>
    </ul>
</template>

我没有收到关于'items'prop的任何错误，我甚至在html代码中看到了一对<li>，因此items正在运行，而不是在我使用我的{时{1}}组件！

这是另一个组成部分：

treeViewItem

Answer 1

我发现了问题，子组件导入了错误的ts文件：

<script lang="ts">
    import treeViewItem from './treeView';
    export default treeViewItem;
</script>

而不是

<script lang="ts">
    import treeViewItem from './treeViewItem';
    export default treeViewItem;
</script>

该死的，复制粘贴！

Vue.js缺少必需的道具

1 个答案: