面试题：Vue中如何在子组件内绑定自定义事件并传递数据给父组件

Question

请描述在Vue组件中，如何在子组件内触发一个自定义事件，并将特定的数据传递给父组件进行处理，同时给出相应的代码示例。

Answer 1

在Vue组件中，子组件触发自定义事件并传递数据给父组件可按以下步骤：

1. 在子组件中：使用 $emit 方法触发自定义事件，并传递数据。
2. 在父组件中：在子组件标签上监听自定义事件，并定义处理函数来接收数据。

代码示例如下：

子组件 (ChildComponent.vue)

<template>
  <button @click="sendDataToParent">点击触发事件</button>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      const dataToSend = { message: '这是来自子组件的数据' };
      this.$emit('custom-event', dataToSend);
    }
  }
};
</script>

父组件 (ParentComponent.vue)

<template>
  <div>
    <ChildComponent @custom-event="handleCustomEvent" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(data) {
      console.log('接收到子组件数据:', data);
    }
  }
};
</script>

在上述代码中，子组件 ChildComponent 内按钮点击时通过 $emit 触发名为 custom-event 的自定义事件，并传递 dataToSend 对象。父组件 ParentComponent 中在 ChildComponent 标签上监听 custom-event 事件，并在 handleCustomEvent 方法中处理接收到的数据。