带有TypeScript的Vue.js-获取ref子组件的类型

s2j5cfk0  于 2022-12-14  发布在  Vue.js
关注(0)|答案(3)|浏览(179)

我的父组件有一个名为的子组件,并向其传递了引用:

<child
  ref="childRef"
/>

现在,我想从父组件运行子组件内部的函数,如下所示:

mounted() {
  (this.$refs.childRef as any).testFunction();
}

当然,它对任何类型都能正常工作,但是我如何设置正确的类型来运行这个函数呢?
如果使用组件本身的类型:

(this.$refs.childRef as Child).testFunction();

它仍然表示testFunction属性在类型'Vue'上不存在。
我使用Vue.js2版本。
我的子组件:

@Component({})
export default class Child extends Mixins(CustomMixin) {
  testFunction() {
    console.log('test');
  }
}

编辑:我还发现了这个解决方案来运行函数:

(this.$refs.childRef as Child & { testFunction:() => void }).testFunction();

它用方法testFunction()更新Child类型,它实际上是有效的,尽管我不知道这是不是一个好方法。

r9f1avp5

r9f1avp51#

您的代码看起来很好,它应该可以正常工作,因为子组件ref只包含子组件的示例。以下是代码片段。请查看并交叉检查您的代码,以找出根本原因。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <child ref="childCom"></child>
</div>

Vue.component('child', {
    methods: {
    testFunction() {
        console.log('test function call')
    }
  }
});

var app = new Vue({
  el: '#app',
  mounted() {
    (this.$refs.childCom as Child).testFunction();
  }
});

演示链接:https://jsfiddle.net/w6bjso78/

ve7v8dk2

ve7v8dk22#

到目前为止,这是我找到的解决方案:

(this.$refs.childRef as Child & { testFunction:() => void }).testFunction();

虽然我不知道这是不是一个干净的方法,但它可以工作。它用一个void方法testFunction更新Child类型。

qvtsj1bj

qvtsj1bj3#

我用这个解决了这个问题:

const MyComponent = ref<InstanceType<typeof MyFileBoard>>()

您可以阅读更多详细信息there

相关问题