如何使用$引用vue中的错误vue|Element|vue[]| Element[]

Question

我需要使用这个$js中的refs.calendar.$refs.calellar.showPageRange((可以工作，但在ts中，类型"Vue|Element|Vue[]|Element[]"上不存在错误"$refs">

<v-date-picker
v-model="dates"
ref="calendars"
/>

ts

interface Data {
dates?: { start: Date; end: Date };
} 
export default Vue.extend({
components: {
VDatePicker: () => import('v-calendar/lib/components/date-picker.umd')
},
data(): Data {
return {
dates: undefined
};
},

方法

this.$refs.calendars.$refs.calendar.showPageRange({
from: this.dates.end
})

Property '$refs' does not exist on type 'Vue | Element | Vue[] | Element[]'.

Answer 1

我回顾以前的答案，意识到自己有多愚蠢。

现在我知道$ref.xxx可能已经找到了一种类型的Vue或Element

你可以简单地添加一个像这样的断言

(this.$refs.calendars as Vue).$refs.calendar.showPageRange({
from: this.dates.end
})

或

(this.$refs.calendars as VDatePicker).$refs.calendar.showPageRange({
from: this.dates.end
})

Answer 2

//(I was using a QSelect quasar element)..
<template>
<q-select ref="selector"> </q-select>
</template>
<script lang="ts">
import { QSelect } from 'quasar';
$refs!: {
selector: QSelect;
};
mounted() {
this.$nextTick(() => {
(this.$refs.selector).showPopup();
});
}
<script>