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

【问题标题】：How do you emit an event to parent layout slot in Vue?如何在 Vue 中向父布局槽发出事件？
【发布时间】：2020-04-28 02:17:32
【问题描述】：

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

这是我的组件

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

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

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

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

【问题讨论】：

标签： vue.js

【解决方案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>

【讨论】：