optionApi中暴露的mixin对象如何混入class component（ts）

2023-03-17 35 阅读1分钟

在项目中我们可能遇到optionApi和class components写法共存的项目

在class component中使用老的mixins对象，直接使用的话，在extends的时候就会报类型缺失：

没有与此调用匹配的重载

同时，访问mixin里提供的属性也会给与该实例不存在某某属性的提示

此处control是类似

const control = {
    data() {
        return {}
    },
    methods: {}
}

<script lang="ts">
import { Component, Vue, Prop, Mixins } from 'vue-property-decorator';
import { control } from '../mixins';

@Component
export default class PersonalAuth extends Mixins(control) {
}
</script>

我们可以通过使用Vue.extend()来将control转化为一个继承Vue的子类，让Vue去推导类型，用这个新的子类去做mixins，就解决了

const Mix = Vue.extend(control)
@Component
export default class PersonalAuth extends Mixins(Mix) {
}