vue3子组件向父组件传值

Vue 3中子组件向父组件传值可以使用自定义事件，通过$emit()方法触发事件并传递数据，在父组件中通过@事件名接收并处理数据。具体可以参考如下代码：

子组件代码：

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

父组件代码：

<template>
  <div>
    <child-component @my-event="handleEvent"></child-component>
    <p>父组件接收到的值：{{value}}</p>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      value: ''
    }
  },
  methods: {
    handleEvent(value) {
      this.value = value;
    }
  }
}
</script>

在上述代码中，子组件中通过$emit()方法触发my-event事件，并传递参数'子组件传递的数据'。父组件中通过@my-event监听到my-event事件，并调用handleEvent()方法处理数据。最终在父组件中展示接收到的数据value。