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

在 Vue 中，通过使用 `<component>` 标签来动态渲染组件，当然也可以使用子组件的方法。

首先，在子组件中定义一个方法，例如：

<template>
  <div>
    <button @click="hello">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    hello() {
      console.log('Hello, world!')
    }
  }
}
</script>

然后，在父组件中使用 `<component>` 标签动态渲染子组件，并给它添加一个 `ref` 属性：

<template>
  <div>
    <component ref="childComponent" :is="currentComponent"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'my-component'
    }
  },
  methods: {
    callChildMethod() {
      this.$refs.childComponent.hello()
    }
  }
}
</script>

在父组件的 `callChildMethod` 方法中，我们可以通过 `$refs` 来获取子组件的引用，并直接调用子组件的 `hello` 方法。

这样，当父组件中的 `callChildMethod` 方法被调用时，就会在控制台输出 "Hello, world!"。