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

Question

在Vue项目中，假设你有一个子组件child.vue和父组件parent.vue，现在需要在子组件中触发一个自定义事件，并将子组件中的某个数据传递给父组件进行处理。请描述具体的实现步骤，并给出相应的代码示例。

Answer 1

实现步骤

1. 在子组件 child.vue 中定义并触发自定义事件，同时传递数据。
2. 在父组件 parent.vue 中注册子组件，并监听自定义事件，在事件处理函数中处理接收到的数据。

代码示例

child.vue

<template>
  <div>
    <button @click="sendData">发送数据</button>
  </div>
</template>

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

parent.vue

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

<script>
import Child from './child.vue';

export default {
  components: {
    Child
  },
  methods: {
    handleCustomEvent(data) {
      console.log('接收到子组件的数据:', data);
      // 在这里进行数据处理
    }
  }
};
</script>