Vue.js with TypeScript - 获取 ref 子组件的类型答案

【问题标题】：Vue.js with TypeScript - getting the type of the ref child componentVue.js with TypeScript - 获取 ref 子组件的类型
【发布时间】：2022-12-13 11:55:55
【问题描述】：

我的父组件有一个子组件调用传递给它的引用：

<child
  ref="childRef"
/>

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

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

当然它适用于任何类型，但如何设置正确的类型来运行此功能？

如果我使用组件本身的类型：

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

它仍然说属性 testFunction 在类型“Vue”上不存在。

我使用 Vue.js 的 2 版本。

我的子组件：

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

编辑：我还找到了运行该功能的解决方案：

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

它使用 testFunction() 方法更新 Child 类型，并且它确实有效。虽然我不知道这是否是一个好方法。

【问题讨论】：

它应该工作。
最初并未显示 Child 是如何定义的。这非常适合您的情况，它是 vue-class-component 而不是每个组件。因为在你的情况下Child 是一个类，我希望它能工作。 “解决方案”是修复类型问题的 hack，它不是正确的解决方案。您需要添加如何观察问题的详细信息，因为构建时和 IDE 中的 TS 错误是完全不同的事情。考虑提供一种重现它的方法，例如在 Stackblitz 上使用一些 vue+ts 模板

标签： typescript vue.js vuejs2 vue-class-components

【解决方案1】：

您的代码看起来不错，它应该可以作为子组件 ref 仅包含子组件的实例。这是代码sn-p。请查看并交叉检查您的代码以找出根本原因。

<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/

【讨论】：

你测试了吗？ Child 不是类，它不能用作实例的类型。这是TS问题。没有类型的代码可能是可行的。
@EstusFlask 抱歉，SO 代码 sn-p 不支持打字稿。因此，我只是添加了一个 jsfiddle 链接。感谢您指出了这一点。
是的，我还用子组件和一种可能的解决方案更新了我的问题。子组件导出为 Vue 类型。我使用 Mixins，但它也与 extends Vue 相同。

【解决方案2】：

到目前为止，这是我找到的解决方案：

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

它有效，但我不知道这是否是一个干净的方法。它使用 void 方法 testFunction 更新 Child 类型。

【讨论】：

【解决方案3】：

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

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

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

【讨论】：