vue3 emit传参

// 子组件 (ChildComponent.vue)
<template>
  <button @click="sendDataToParent">点击发送数据到父组件</button>
</template>

<script>
export default {
  name: 'ChildComponent',
  methods: {
    sendDataToParent() {
      // 使用 $emit 触发自定义事件，并传递参数
      this.$emit('data-from-child', { message: '这是来自子组件的数据' });
    }
  }
}
</script>

// 父组件 (ParentComponent.vue)
<template>
  <div>
    <child-component @data-from-child="handleDataFromChild"></child-component>
    <p>{{ receivedData }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedData: ''
    };
  },
  methods: {
    handleDataFromChild(data) {
      // 接收子组件传递的数据
      this.receivedData = data.message;
    }
  }
}
</script>

解释说明：

1. 子组件 (ChildComponent.vue):

   • 当按钮被点击时，调用 sendDataToParent 方法。
   • 在该方法中，使用 this.$emit 触发一个名为 data-from-child 的自定义事件，并传递一个对象作为参数。

2. 父组件 (ParentComponent.vue):

   • 在模板中，通过 @data-from-child="handleDataFromChild" 监听子组件触发的 data-from-child 事件。
   • 当事件被触发时，调用 handleDataFromChild 方法，接收并处理子组件传递的数据。
   • 将接收到的数据存储在 receivedData 中，并在页面上显示。