vue3 子组件传值父组件

在 Vue3 中，可以使用 `emit` 方法在子组件中触发自定义事件，并在父组件中监听该事件来获取子组件传递的值。

以下是一个示例：

<!-- 子组件 -->
<template>
  <div>
    <button @click="sendData">传递数据给父组件</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  methods: {
    sendData() {
      // 触发自定义事件，并传递数据
      this.$emit('my-event', 'hello from child component')
    }
  }
})
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component @my-event="handleChildEvent"></child-component>
    <p>{{ childData }}</p>
  </div>
</template>

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

export default defineComponent({
  components: {
    ChildComponent
  },
  setup() {
    // 定义响应式数据
    const childData = ref('')
    // 监听子组件的自定义事件
    const handleChildEvent = (data) => {
      childData.value = data
    }
    return {
      childData,
      handleChildEvent
    }
  }
})
</script>

在父组件中，我们使用 `@my-event="handleChildEvent"` 监听子组件触发的自定义事件，并在 `handleChildEvent` 方法中获取子组件传递的数据，并将其赋值给 `childData` 变量。

最后，我们可以在父组件模板中使用 `{{ childData }}` 显示子组件传递的数据。