如何在 Vue 中向父布局槽发出事件？

Posted 2023-02-23

【中文标题】如何在 Vue 中向父布局槽发出事件？

【英文标题】：How do you emit an event to parent layout slot in Vue?

【发布时间】：2020-04-28 02:17:32

【问题描述】：

我试图弄清楚如何获取在<slot/> 组件内触发的事件。

这是我的组件

<template>
  <button @click"$emit('event')">Submit</button>
</template>

它发出一个我想在父布局的槽中捕获的事件。

<template>
  <slot @event="doThis"/>
</template>

我如何做到这一点。我的一些阅读将我引向了作用域插槽，但我不是 100% 确定。

【问题讨论】：

您无法收听<slot> 上的事件。参考：link

你能告诉我们槽内的标记吗？

***.com/a/61918678/9547708 这里是答案，很多组件库都使用这种方式

【参考方案1】：

使用事件总线来闪烁一个事件，这样任何组件都可以在他监听如下时捕获它：

在 event-bus.js 中

import Vue from 'vue';
export const EventBus = new Vue();

在您的父组件和子组件中导入事件总线文件： 从 './event-bus.js' 导入 EventBus ;

在你的父组件中，监听事件：

methods:

    const clickHandler = function(params)  /*Do whatever */ 

mounted()

   EventBus.$on('event', clickHandler);

在您的子组件中，您可以触发如下事件：

<template>
  <button @click="EventBus.$emit('event', params)">Submit</button>
</template>

【讨论】：

如果没有其他解决方案可用，此方法有效。缺点是原本是“本地”的事件现在变成了“全局”，如果不小心处理，可能会导致维护/调试问题。