如何解决在Vue中的动态组件中使用TypeScript抽象类-无法与组件实例进行交互
我一直在使用TypeScript抽象对Vuejs Dynamic Components进行修改,并且在加载该组件时遇到一些麻烦。这是我当前的设置:
抽象类:
import { Component,Vue } from 'vue-property-decorator'
Component({})
export default abstract class Question extends Vue {
public abstract get isValid(): boolean;
}
实现类:
@Component({})
export default class Address extends Question {
public get isValid(): boolean {
return true
}
}
加载到动态组件中
<template>
<keep-alive>
<component v-bind:is="this.currentQuestionComponent" />
</keep-alive>
</template>
<script lang="ts">
import { Component,Vue } from 'vue-property-decorator'
import Address from '@/components/questions/Address.vue'
import IQuestion from '@/components/questions/IQuestion.vue'
@Component({
components: {
Address
}
})
export default class Questions extends Vue {
private questions: { [key: number]: any } = {
1: Address
}
get currentQuestionComponent(): Question {
return this.questions[1]
}
private get isValid(): boolean {
return this.currentQuestionComponent.isValid
}
}
我的问题是,由于对动态组件的引用不是Address的实际实例,因此isValid()计算的属性不可调用。有什么优雅的方法可以解决这个问题吗?我的首选方式是将一个实际的类实例传递给动态组件,以便我可以自己跟踪其生命周期,但是不幸的是,这无法正常工作,即
private questions: { [key: number]: any } = {
1: new Address()
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。