如果我有一个单文件 Vue 类组件,例如:
// MyComponent.vue
<template>
<div></div>
</template>
import Vue from 'vue'
import Component from 'vue-class-component'
@Component({
})
export default class MyComponent extends Vue {
public message: string = 'Hello!'
}
我将它导入到其他地方,并获取它的一个实例。
import MyComponent from "./MyComponent.vue";
...
const foo = ... as MyComponent;
foo.message = "goodbye";
使用标准的 Vue CLI 3 设置会出现错误,因为它包含
shims-vue.d.ts
具有以下内容:declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
据我了解,这意味着无论何时你写
import Foo from "./Foo.vue"
,然后 Foo
将只是 Vue
的别名,您将无法访问其成员。如果您从
.ts
导入,情况似乎确实如此。文件。如果您从 .vue
导入文件,它神奇地工作!不幸的是,我所有的测试都是
.spec.ts
文件,因此我无法导入任何组件的类型。这使得测试变得困难。有没有什么办法解决这一问题?
最佳答案
我在 Vue 2 和 Vue 3 项目中的做法如下:
<template>
<div>... Your template code here ...</div>
</template>
<script lang="ts" src="./Foo.vue.ts" />
import Vue from 'vue'
import Component from 'vue-class-component'
@Component({
})
export default class MyComponent extends Vue {
public message: string = 'Hello!'
}
as
关键词。 import MyComponent from "./MyComponent.vue";
...
const foo = obj as MyComponent;
foo.message = "goodbye";
关于typescript - 如何导入具有正确类型的 Vue 类组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59788796/