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）：在子组件中定义一个方法，然后通过`this.$emit`触发自定义事件，父组件监听该事件并调用相应的方法。

<template>
  <div>
    <button @click="childMethod">点击触发自定义事件</button>
  </div>
</template>

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

<template>
  <div>
    <child-component @child-event="parentMethod"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    parentMethod() {
      // 调用父组件方法
    }
  }
}
</script>

3. 使用`$children`：在父组件中使用`$children`获取所有子组件的实例数组，然后调用相应的方法。

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

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$children[0].childMethod();
    }
  }
}
</script>

这些是Vue中父组件调用子组件方法的几种常见方式，你可以根据实际情况选择适合你的方式。