vue3 父组件中如何监听子组件暴漏的属性

在Vue 3中，如果你想在父组件中监听子组件暴露的属性，你可以使用自定义事件。子组件通过`$emit`方法发出事件，并在父组件中通过监听这些事件来响应子组件的变化。以下是具体实现的步骤：

1. 在子组件中定义一个方法，当需要通知父组件时调用`this.$emit('事件名', 参数)`来触发一个自定义事件。这里的`事件名`是自定义的，可以根据需要命名，`参数`是传递给父组件的数据。

2. 在父组件的模板中，使用`v-on`指令（或简写为`@`）来监听子组件发出的事件。当事件被触发时，父组件可以执行一个方法来处理接收到的数据。

下面是一个简单的例子：

子组件（ChildComponent.vue）:

<template>
  <button @click="notifyParent">点击我</button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      this.$emit('update-message', '新消息从子组件传来');
    }
  }
}
</script>

父组件:

<template>
  <child-component @update-message="handleMessage"></child-component>
  <p>{{ message }}</p>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    };
  },
  methods: {
    handleMessage(newMessage) {
      this.message = newMessage;
    }
  }
}
</script>

在上面的例子中，当子组件的按钮被点击时，会触发`notifyParent`方法，该方法发出一个`update-message`事件，并传递一个字符串。父组件监听这个事件，并在`handleMessage`方法中处理这个字符串，更新父组件的`message`数据属性。