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

s2j5cfk0 于 2022-12-14 发布在 Vue.js

关注(0)|答案(3)|浏览(180)

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

<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类型，它实际上是有效的，尽管我不知道这是不是一个好方法。

vue.js

来源：https://stackoverflow.com/questions/73080744/vue-js-with-typescript-getting-the-type-of-the-ref-child-component

3条答案

按热度按时间

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/

赞(0）回复(0）举报 2022-12-14

ve7v8dk22#

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

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

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

赞(0）回复(0）举报 2022-12-14

qvtsj1bj3#

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

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

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

赞(0）回复(0）举报 2022-12-14

我来回答

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

3条答案

相关问题

热门标签

最新问答