typescript - 如何在 Vue3 Typescript 中动态调用组件的方法？

Question

我有一个需要动态调用方法的 vuejs 代码，它基于从呈现浏览器（在 Lua 中）的另一个应用程序调度的事件。

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
  methods: {
    methodA() {
      console.log('method A called');
    },
    methodB() {
      console.log('method B called');
    },
    methodC() {
      console.log('method C called');
    },
  },
  mounted() {
    window.addEventListener('message', (data:any) => {
      // @ts-ignore: Unreachable code error
      if (this[data.data.method]) {
        // @ts-ignore: Unreachable code error
        this[data.data.method]();
      }
    });
  },
});
</script>

我想知道一种正确编译它的方法，而不必使用 ts-ignore 绕过 Typescript 编译器。

有谁知道没有 ts-ignore 我怎么能做到这一点？欢迎使用类型断言或类似方式，我只想在没有这些注释的情况下编译我的代码。

PS：这是我的第一个问题，如果我做错了什么，请见谅。

标签： typescriptvue-componentvuejs3