Vue自定义组件 父组件使用子组件的方法

在Vue中，父组件可以使用子组件的方法通过以下几种方式：

1. 使用`$refs`引用子组件：在父组件中，可以通过`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`触发自定义事件，然后在父组件中通过`@`监听该事件，并执行相应的方法。例如：

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

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$emit('call-child-method');
    },
    handleChildMethod() {
      // 处理子组件方法调用
    }
  }
}
</script>

请根据你的需求选择适合的方式来使用子组件的方法。