vue3父组件监听子组件数据

在Vue 3中，父组件不能使用`$on`来直接监听子组件的数据变化。相反，您可以使用`$emit`方法在子组件上触发自定义事件，并使用`@`或`v-on`指令在父组件中监听该事件，从而实现子组件向父组件传递数据。

在子组件中，您可以使用`$emit`方法触发自定义事件，例如：

<!-- 子组件中 -->
<button @click="$emit('child-event', childData)">点击我传递子数据</button>

在父组件中，您可以使用`@`或`v-on`指令来监听子组件触发的自定义事件，并在相应的方法中处理数据，例如：

<!-- 父组件中 -->
<Child @child-event="getChildData"/>
<!-- 或 -->
<Child v-on:child-event="getChildData"/>

在父组件的`methods`中，您可以定义`getChildData`方法来处理子组件触发的事件，并在该方法中获取子组件传递的数据进行后续操作。

<script>
import Child from './Child.vue';

export default {
  components: {
    Child,
  },
  methods: {
    getChildData(childData) {
      // 处理 child-event 事件
    }
  }
}
</script>

通过以上方式，您可以在Vue 3中实现父组件监听子组件数据的功能。