vue 通过<component>使用组件,怎么使用子组件的方法

在 Vue 中，通过`<component>`使用组件时，可以通过`ref`属性为子组件指定一个引用名，然后在父组件中通过`this.$refs`访问该子组件实例，从而调用该子组件的方法。

例如，在父组件中，定义一个子组件`ChildComponent`，并给它一个`ref`属性：

<template>
  <div>
    <child-component ref="child"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  mounted() {
    this.$refs.child.doSomething(); // 调用子组件的 doSomething 方法
  }
};
</script>

在子组件`ChildComponent`中，定义一个`doSomething`方法：

<template>
  <div>
    <p>子组件内容</p>
  </div>
</template>

<script>
export default {
  methods: {
    doSomething() {
      console.log('子组件的 doSomething 方法被调用了！');
    }
  }
};
</script>

这样，在父组件的`mounted`生命周期钩子函数中，可以通过`this.$refs.child.doSomething()`调用子组件`ChildComponent`的`doSomething`方法。