Vue.js 缺少必需的道具答案

【问题标题】：Vue.js missing required propVue.js 缺少必需的道具
【发布时间】：2018-10-21 06:59:03
【问题描述】：

我刚开始使用 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 warn]: Missing required prop: "items"

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

谢谢，

编辑 1 我尝试在treeView.vue 文件中用简单的<li> 替换<treeViewItem>：

<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>

我没有收到关于“项目”道具的任何错误，我什至看到在 html 代码中生成了一对<li>，所以items 正在工作，只是在我使用我的treeViewItem 组件时没有！

这里是另一个组件：

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

【问题讨论】：

您是否尝试将数据更改为函数？ data () { return { items: treeViewItems } }?
检查treeViewItems是否有数据。
你确定items!: 不应该是items: 吗？
@ittus 是的，我确实尝试了一个函数，结果相同
@gypsyCoder 是的，我只有一个测试程序，treeViewItems 变量在创建 Vue 之前就行初始化

标签： typescript vue.js vuejs2 vue-component

【解决方案1】：

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

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

代替

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

该死的，复制粘贴！

【讨论】：