setup组件通信$emit

在Vue.js中，组件之间的通信可以通过props和$emit来实现。props是父组件向子组件传递数据的方式，而$emit则是子组件向父组件发送事件的方式。

当一个子组件需要向父组件传递数据时，可以使用$emit方法。首先，在子组件中定义一个事件，并使用$emit方法触发该事件。父组件可以通过在子组件上监听该事件来接收数据。

下面是一个示例：

子组件Child.vue：

<template>
  <button @click="sendMessage">发送消息</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello, parent!'); // 触发名为'message'的事件，并传递数据
    }
  }
}
</script>

父组件Parent.vue：

<template>
  <div>
    <child @message="handleMessage"></child> <!-- 监听名为'message'的事件，并指定回调函数 -->
    <p>{{ receivedMessage }}</p> <!-- 显示接收到的消息 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      receivedMessage: ''
    }
  },
  methods: {
    handleMessage(message) {
      this.receivedMessage = message; // 接收到子组件传递的消息
    }
  }
}
</script>

在上述示例中，当点击子组件中的按钮时，会触发名为'message'的事件，并将字符串'Hello, parent!'作为参数传递给父组件。父组件通过监听'message'事件，并在回调函数中接收到子组件传递的消息，并将其显示在页面上。