面试题：Vue中组件事件冒泡机制在父子组件间如何体现

Question

在Vue中，父组件包含子组件，子组件触发一个自定义事件，描述一下如何实现该事件的冒泡，使得父组件能够监听到这个事件并做出响应。同时说明在模板语法和JavaScript代码中分别需要做哪些操作。

Answer 1

1. 模板语法：
   • 在子组件标签上使用 v - on 指令监听子组件触发的自定义事件。例如，如果子组件触发的自定义事件名为 child - event，在父组件模板中这样写：

   <template>
     <ChildComponent @child - event="handleChildEvent"></ChildComponent>
   </template>
   

   • 其中 handleChildEvent 是父组件中定义的处理函数。
2. JavaScript 代码：
   • 在子组件中，使用 $emit 方法触发自定义事件。例如：

   export default {
     methods: {
       someFunction() {
         this.$emit('child - event', data); // data 是可以传递给父组件的数据
       }
     }
   };
   

   • 在父组件中，定义处理函数 handleChildEvent。例如：

   export default {
     methods: {
       handleChildEvent(data) {
         // 处理子组件传递过来的数据，做出相应响应
         console.log('Received data from child:', data);
       }
     }
   };
   

通过上述在模板语法中监听事件，在子组件 JavaScript 代码中触发事件，在父组件 JavaScript 代码中处理事件，即可实现子组件自定义事件冒泡到父组件并让父组件做出响应。