vue emit 传参

// 父组件 (ParentComponent.vue)
<template>
  <div>
    <child-component @custom-event="handleCustomEvent"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(data) {
      console.log('Received data from child component:', data);
    }
  }
};
</script>

// 子组件 (ChildComponent.vue)
<template>
  <div>
    <button @click="sendDataToParent">Send Data to Parent</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      const data = { message: 'Hello from child component!' };
      this.$emit('custom-event', data);
    }
  }
};
</script>

解释说明

1. 父组件：

   • 在父组件中，我们引入并注册了子组件 ChildComponent。
   • 使用 @custom-event 监听来自子组件的自定义事件 custom-event。
   • 当事件触发时，调用 handleCustomEvent 方法，并将子组件传递的数据作为参数接收。

2. 子组件：

   • 在子组件中，定义了一个按钮，点击按钮时会调用 sendDataToParent 方法。
   • sendDataToParent 方法中，通过 this.$emit('custom-event', data) 触发自定义事件 custom-event，并将数据传递给父组件。

通过这种方式，子组件可以向父组件传递数据。