预期T，在自定义Object-Type的Vue-Prop中得到Object 说明

编程问答 2022-06-01

问题描述

说明

你好，

我想使用 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.dev 提供的组件 @bit/myproject.my-component 提供了我的组件的打包和缩小版本。在那里，道具看起来像这样：

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

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

解决方法

基本上在您的项目中似乎实际上有 2 个类 seekBar.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View v,MotionEvent event) { if (event.getAction() == MotionEvent.ACTION_DOWN) myScrollView.setScrollingEnabled(false); else if (event.getAction() == MotionEvent.ACTION_UP) myScrollView.setScrollingEnabled(true); return false; } }); ：

  • 您相对导入的那个：
CustomItem
  • 以及您作为外部包导入的那个：
import CustomItem from "../../../../objects/CustomItem";

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

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

但是 JS 世界的事情有时并不简单，即使这样也可能对您没有帮助 - 有时即使以这种方式引用 import CustomItem from '@bit/myproject.custom-item'; 也不能保证不会有超过一个 CustomItem您的生产代码库。如果检查道具的类型真的很重要，我建议的解决方案是在 'duck-typing' 中强制执行 a custom props validator。您仍然不能使用 JS instanceof，因为它不起作用，即使检查 CustomItem 也不是一个好主意，因为类名在代码最小化过程中会发生变化，因此duck-typing 似乎是唯一合理的解决方案给你。

bit.devjavascriptvue.js