Vue 进阶面试题, 在 Vue 自定义事件中,父组件如何接收子组件传递的多个参数?
Vue 进阶面试题, 在 Vue 自定义事件中,父组件如何接收子组件传递的多个参数?
QA
Step 1
Q:: 在 Vue 自定义事件中，父组件如何接收子组件传递的多个参数？
A:: 在 Vue 中，父组件可以通过监听子组件触发的自定义事件来接收多个参数。具体来说，可以在子组件中使用 $emit 方法传递多个参数。例如：this.$emit('custom-event', arg1, arg2, arg3)。在父组件中，可以通过 v-on 或者 @ 语法来监听这个事件，并在回调函数中接收这些参数：<ChildComponent @custom-event='handleEvent' />，然后在父组件的 methods 中定义 handleEvent(arg1, arg2, arg3) 方法来接收这些参数。
Step 2
Q:: Vue 中的 $emit 和 $on 有什么区别？
A:: 在 Vue 中，$emit 是用来触发一个事件，并可传递参数。它通常用于子组件向父组件发送事件通知。$on 则是用来监听事件的，它可以在组件实例上监听一个自定义事件，并在事件触发时执行回调函数。常见用法是在父组件中监听子组件触发的事件。
Step 3
Q:: Vue 中的 $listeners 是什么，有什么用？
A:: $listeners 是一个包含父组件中所有通过 v-on 绑定到当前组件上的事件监听器的对象。它可以被用来在封装组件中自动传递所有事件监听器，通常与 v-on='$listeners' 配合使用，以确保所有事件能够被正确转发。
Step 4
Q:: 如何在 Vue 组件中实现事件总线？
A:: 在 Vue 中，可以通过一个空的 Vue 实例作为事件总线（Event Bus）来实现不同组件之间的通信。首先，创建一个新的 Vue 实例：const EventBus = new Vue(); 然后，其他组件可以通过 EventBus.$emit('event-name', data) 来触发事件，或者通过 EventBus.$on('event-name', callback) 来监听事件。这种方式虽然简单，但在大型应用中可能导致维护困难，因此更推荐使用 Vuex 或者官方的 provide/inject API。