vue3 子组件给父组件传值

在Vue3中，子组件向父组件传值可以通过`$emit`方法来实现。具体步骤如下：

1. 在子组件中定义一个事件，通过`$emit`方法触发该事件并传递需要传递的数据。例如：

// 子组件中
<template>
  <button @click="handleClick">点击</button>
</template>
<script>
  export default {
    methods: {
      handleClick() {
        // 传递数据
        this.$emit('my-event', '我是传递的数据')
      }
    }
  }
</script>

2. 在父组件中监听该事件，并在方法中接收传递的数据。例如：

// 父组件中
<template>
  <child-component @my-event="handleEvent"></child-component>
</template>
<script>
  import ChildComponent from './ChildComponent.vue'

  export default {
    components: {
      ChildComponent
    },
    methods: {
      handleEvent(data) {
        console.log(data) // 打印出传递的数据
      }
    }
  }
</script>

这样，当子组件中的按钮被点击时，就会触发`my-event`事件，并将数据传递给父组件，父组件中的`handleEvent`方法就可以接收到该数据并进行处理。