vue父组件调用子组件的方法，ts声明类型为啥不显示

在 Vue 中，父组件可以通过 `$refs` 来获取子组件实例，并调用子组件的方法。但是在 TypeScript 中，需要为 `$refs` 声明类型才能使用。如果声明类型不显示，可能是以下原因：

1. 父组件没有正确引入子组件并注册子组件。
2. 子组件没有正确声明 props 和 methods。
3. TypeScript 版本过低或者没有正确配置 TypeScript。

为了解决这个问题，可以先确认以上问题是否存在。如果没有问题，可以尝试在父组件中声明子组件的类型。例如：

import { Vue, Component, Ref } from 'vue-property-decorator';
import ChildComponent from '@/components/ChildComponent.vue';

@Component
export default class ParentComponent extends Vue {
  @Ref() readonly childComponent!: ChildComponent;

  handleClick() {
    this.childComponent.someMethod();
  }
}

这里使用了 `vue-property-decorator` 库来方便地声明子组件类型，并使用了 `@Ref` 装饰器来获取子组件实例。如果仍然无法解决问题，可以尝试升级 TypeScript 版本或者重新配置 TypeScript。

相关问题

vue ts父组件调用子组件方法，但是声明的类型没有

在Vue中，如果父组件需要调用子组件的方法，可以通过在父组件中使用`$refs`来获取对子组件的引用，然后通过这个引用来调用子组件的方法。在这个过程中，需要在子组件中声明一个公共的方法，并且在父组件中定义一个类型，来匹配子组件中的方法。

如果父组件调用子组件方法声明的类型没有，则需要检查子组件中的方法是否与声明的类型一致。如果不一致，需要修改子组件中的方法，使其与声明的类型匹配。

在使用TypeScript开发Vue应用时，可以通过在Vue组件中定义`$refs`属性的类型来匹配子组件的类型，例如：

import { Component, Vue } from 'vue-property-decorator';
import ChildComponent from '@/components/ChildComponent.vue';

@Component({
  components: { ChildComponent },
})
export default class ParentComponent extends Vue {
  // 定义$refs属性的类型
  $refs!: {
    childComponent: ChildComponent;
  };

  // 在父组件中调用子组件方法
  handleClick() {
    this.$refs.childComponent.methodInChildComponent();
  }
}

需要注意的是，在使用`$refs`时需要确保子组件已经被挂载，否则引用会返回`undefined`。可以在生命周期函数`mounted()`中调用子组件方法，或者在需要使用子组件方法的时候通过`$nextTick()`来确保子组件已经被挂载。

vue3父组件调用子组件中的方法如何有ts类型提示

在 Vue 3 中，可以使用 `ref` 和 `setup` 函数来实现父组件调用子组件中的方法并有 TypeScript 类型提示。

首先，在子组件中定义一个 `ref`，并将要调用的方法赋值给该 `ref`。例如：

import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const myMethod = ref<(data: string) => void>();

    const handleClick = (data: string) => {
      if (myMethod.value) {
        myMethod.value(data);
      }
    };

    return {
      myMethod,
      handleClick,
    };
  },
});

然后，在父组件中通过 `ref` 获取子组件实例，并调用子组件中的方法。例如：

import { defineComponent, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default defineComponent({
  components: {
    ChildComponent,
  },

  setup() {
    const childRef = ref<InstanceType<typeof ChildComponent>>();

    const handleChildMethod = () => {
      if (childRef.value) {
        childRef.value.myMethod.value('data');
      }
    };

    return {
      childRef,
      handleChildMethod,
    };
  },
});

这样就可以实现父组件调用子组件中的方法并有 TypeScript 类型提示。