vue组件 父级调用子级事件方法

在 Vue 中，父组件可以通过 `$refs` 属性访问子组件实例，从而调用子组件的方法。假设子组件的名称为 `Child`，它有一个名为 `childMethod` 的事件方法，那么可以通过以下方式在父组件中调用：

1. 在子组件上添加 `ref` 属性，例如：

<template>
  <div>
    <button @click="childMethod">子组件按钮</button>
  </div>
</template>
<script>
export default {
  methods: {
    childMethod() {
      console.log('子组件方法被调用了')
    }
  }
}
</script>

在父组件中，使用 `ref` 属性来声明子组件：

<template>
  <div>
    <child ref="childComponent"></child>
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>
<script>
import Child from './Child.vue'

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

在父组件的 `callChildMethod` 方法中，通过 `this.$refs.childComponent` 获取子组件实例，并调用其 `childMethod` 方法。

需要注意的是，使用 `$refs` 所获取的子组件实例是异步更新的，因此在使用前需要确保子组件已经被渲染完成。另外，使用 `$refs` 的方式不太推荐，因为它可能会导致代码的可维护性变差，建议在父子组件之间通信时，使用 props 和 emit 的方式来实现。