从插槽中的内容向父级发送事件

Question

我正在尝试构建一个灵活的轮播控件，允许内部内容元素强制更改幻灯片，以及轮播控件本身更改幻灯片

我页面中的示例结构看起来像

<my-carousel>
  <div class="slide">
    <button @click="$emit('next')">Next</button>
  </div>

  <div class="slide">
    <button @click="$emit('close')">Close</button>
  </div>
</my-carousel>

我的轮播模板就像

<div class="carousel">
  <div class="slides" ref="slides">
    <slot></slot>
  </div>
  <footer>
   <!-- other carousel controls like arrows, indicators etc go here -->
  </footer>
</div>

和脚本一样

...
created() {
 this.$on('next', this.next)
}
...

访问幻灯片等没有问题，但是使用 $emit 将不起作用，我似乎无法找到解决此问题的简单解决方案。

我希望组件可以轻松重复使用而无需使用

• 中央事件总线
• 轮播中的硬编码幻灯片
• 在页面级别实现下一个幻灯片方法并将当前索引传递给控件（因为我每次使用轮播时都必须这样做）

原文由 Frnak 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

插槽是针对父组件范围编译的，因此您从插槽发出的事件只会被模板所属的组件接收。

如果你想在轮播和幻灯片之间进行交互，你可以使用一个 作用域插槽，它允许你将数据和方法从轮播公开到插槽。

假设您的轮播组件具有 next 和 close 方法：

轮播模板：

 <div class="carousel">
  <div class="slides" ref="slides">
    <slot :next="next" :close="close"></slot>
  </div>
  <footer>
    <!-- Other carousel controls like arrows, indicators etc go here -->
  </footer>
</div>

轮播示例用法：

 <my-carousel v-slot="scope">
  <div class="slide">
    <button @click="scope.next">Next</button>
  </div>

  <div class="slide">
    <button @click="scope.close">Close</button>
  </div>
</my-carousel>

原文由 Decade Moon 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

只需将 $emit('next') 替换为 $parent.$emit('next') 。

原文由 yukashima huksay 发布，翻译遵循 CC BY-SA 4.0 许可协议