Vue.js 缺少必需的道具

Posted 2023-02-23

【中文标题】Vue.js 缺少必需的道具

【英文标题】：Vue.js missing required prop

【发布时间】：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 之前就行初始化

【参考方案1】：

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

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

代替

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

该死的，复制粘贴！