vue如何调用子组件方法

在Vue中，调用子组件的方法有几种方式：

1. 使用`ref`：在父组件中给子组件添加一个`ref`属性，然后通过`$refs`来访问子组件的实例，并调用其方法。

<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.child.childMethod();
    }
  }
}
</script>

2. 使用自定义事件：在子组件中使用`$emit`触发一个自定义事件，然后在父组件中通过`@`语法监听并执行相应的方法。

<!-- ChildComponent.vue -->
<template>
  <div>
    <button @click="childMethod">触发自定义事件</button>
  </div>
</template>

<script>
export default {
  methods: {
    childMethod() {
      this.$emit('customEvent');
    }
  }
}
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <child-component @customEvent="parentMethod"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    parentMethod() {
      console.log('调用了子组件的方法');
    }
  }
}
</script>

这些是两种常见的调用子组件方法的方式，可以根据具体的情况选择适合的方式使用。