2

描述

你好呀，

我想使用 bit.dev 分享我的 Vue 组件。

我有一个像这样的 Vue 组件：

<template>
    ...
</template>

<script>

import CustomItem from "../../../../objects/CustomItem";

export default {
    name: "Test",
    props: {
        item: {
            type: CustomItem,
        },
    },
};
</script>

正如你所看到的，这个组件要求 prop 是一个特定的对象。

这是CustomObject

export default class CustomItem {
    constructor ({id, name}) {
        this.id = id;
        this.name = name;
    }

   // provide cool functions here
}

这在我的项目中运行良好，但如果我以这种方式包含它则不行：

<template>
    <div v-if="!$wait.is('item.loading')">
        <MyComponent :item="item"/>
    </div>
</template>

<script>
import MyComponent from '@bit/myproject.my-component'
import CustomItem from '@bit/myproject.custom-item';

export default {
    name: 'Home',
    components: {MyComponent},
    data () {
        return {
            item: {}
        };
    },
    beforeRouteEnter (to, _from, next) {
        const promises = [
            axios.get (`/api/item/1`)
        ];

        next (vm => {
            vm.$wait.start ('item.loading');
            axios.all (promises)
            .then (([itemRes]) => {
                vm.item = new CustomItem(itemRes.data.data);
            }).finally(()=>{
                vm.$wait.end ('item.loading');
            });
        });
    },
};
</script>

在这种情况下，我收到此错误：

[Vue warn]: Invalid prop: type check failed for prop "item". Expected T, got Object 

found in

---> <MyComponent> at resources/js/components/Items/MyComponent.vue

我在这里错过了什么？

编辑

正如我所看到的，@bit/myproject.my-component由 bit.dev 提供的组件提供了我的组件的打包和缩小版本。在那里，道具看起来像这样：

props:{item:{type:function t(e){var n=e.id,r=e.name})...

所以我想这就是为什么会发生这种情况。

4

1 回答 1

2

基本上，在您的项目中似乎实际上有 2 个类CustomItem：

  • 您相对导入的那个：
import CustomItem from "../../../../objects/CustomItem";
  • 以及您作为外部包导入的那个：
import CustomItem from '@bit/myproject.custom-item';

因此，当您将导入统一为一种形式时，我会首先尝试检查它是否有效：

import CustomItem from '@bit/myproject.custom-item';

但是 JS 世界有时事情并不简单，甚至这可能对您没有帮助 - 有时即使以CustomItem这种方式引用也不能保证您的生产代码库中不会有多个CustomItem。如果检查道具的类型真的很重要，我建议的解决方案是在自定义道具验证器中强制执行“鸭子打字” 。您仍然不能使用 JS instanceof，因为它不起作用，即使检查也不是一个好主意，因为在代码最小化期间​​更改了类名，因此鸭子类型似乎是您唯一合理的解决方案。item.prototype.name === 'CustomItem'

于 2021-01-02T22:21:04.933 回答