vue3父组件点击按钮触发子组件的事件

在Vue3中，可以通过使用`ref`和`emit`来实现父组件点击按钮触发子组件的事件。具体步骤如下：

1. 在父组件中，使用`ref`为子组件注册一个引用。

2. 在父组件中，为按钮绑定一个点击事件，并在该事件中使用`emit`触发子组件的事件。

3. 在子组件中，使用`props`接收父组件传递的参数，并在`setup`函数中使用`on`监听父组件传递的事件。

4. 在子组件中，定义一个处理父组件传递事件的方法，并在该方法中处理父组件传递的参数。

下面是一个示例代码：

<!-- 父组件 -->
<template>
  <div>
    <button @click="handleClick">点击触发子组件事件</button>
    <ChildComponent ref="child" />
  </div>
</template>

<script>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  setup() {
    const childRef = ref(null)

    const handleClick = () => {
      childRef.value.$emit('parent-event', '这是父组件传递的参数')
    }

    return {
      childRef,
      handleClick
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>子组件接收到的参数：{{ message }}</p>
  </div>
</template>

<script>
import { on, ref } from 'vue'

export default {
  props: {
    msg: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const message = ref('')

    onMounted(() => {
      on(props, 'parent-event', (msg) => {
        parentMsg(msg)
      })
    })

    const parentMsg = (msg) => {
      message.value = msg
    }

    return {
      message,
      parentMsg
    }
  }
}
</script>