vue3 子组件值暴露给父组件使用

在Vue3中，子组件可以通过$emit方法将数据传递给父组件。具体步骤如下：
1. 在子组件中，使用$emit方法触发一个自定义事件，并将需要传递的数据作为参数传入。
2. 在父组件中，使用v-on指令监听子组件触发的自定义事件，并在事件处理函数中获取子组件传递的数据。
下面是一个简单的示例代码：
在子组件中：

<template>
  <button @click="handleClick">点击传递数据给父组件</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('child-click', '子组件传递的数据')
    }
  }
}
</script>

在父组件中：

<template>
  <div>
    <p>从子组件获取的数据：{{ childData }}</p>
    <child-component @child-click="handleChildClick"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      childData: ''
    }
  },
  methods: {
    handleChildClick(data) {
      this.childData = data
    }
  }
}
</script>

在上面的代码中，子组件中的@click事件触发了handleClick方法，该方法使用$emit方法触发了一个名为'child-click'的自定义事件，并将数据'子组件传递的数据'作为参数传入。在父组件中，使用v-on指令监听了子组件触发的'child-click'事件，并在事件处理函数handleChildClick中获取了子组件传递的数据，并将其赋值给了父组件的childData属性。这样，父组件就可以使用子组件传递过来的数据了。