vue父组件执行子组件的事件

在 Vue 中，如果需要在父组件中执行子组件的事件，可以通过 ref 来获取子组件的实例，然后调用子组件中的方法。具体做法如下：

1. 在子组件中添加需要执行的方法

在子组件中添加需要执行的方法：

<template>
  <div>
    <button @click="handleClick">子组件按钮</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('子组件按钮被点击')
    }
  }
}
</script>

2. 在父组件中使用 ref 属性获取子组件实例

使用 ref 属性给子组件命名，例如：

<template>
  <div>
    <child-component ref="child"></child-component>
  </div>
</template>

在父组件中使用 this.$refs 获取子组件实例：

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

export default {
  components: {
    ChildComponent
  },
  mounted() {
    const childComponentInstance = this.$refs.child
    childComponentInstance.handleClick() // 调用子组件的方法
  }
}
</script>

在父组件中，使用 this.$refs 获取子组件实例，并调用子组件中的方法。

这样，当父组件被挂载后，子组件的 handleClick 方法就会被调用，控制台会输出 "子组件按钮被点击"。