Javascript Vue绑定到动态插槽元素？

我想在插槽中向组件传递一个按钮，该按钮将有一个动作。例如，具有“添加行”功能的表

<my-table :data="data" :cols="cols"> 
   <button slot="add_row"></button>
</my-table>

所以我听指令事件。问题是，指令事件将导致所有警报组件关闭，正如您在JSFIDLE中看到的那样。

---

如何使此模式工作？

要从子元素（

）向其父元素提供数据和操作，您可以查看一下

当子组件具有一些与父组件无关的内部状态时，作用域插槽非常有效，或者为子组件提供自定义属性或回调，并将标记和样式留给父组件

但是，在您的情况下，由于是父级保存了data属性，因此我不确定这是否是最佳解决方案。孩子不应该让它变异

---

您可以简单地解析父组件上的事件。

下面是一个使用作用域插槽的示例。同样对于

v-b-modal

指令，如果您想采用这种方法。我正试图遵循该指令，但无法理解指令如何与组件通信。当单击带有指令的元素并在模态组件中侦听该事件时，他们正在做的是从$root发出事件。谢谢！我正在尝试使用指令来实现这个模式，但是没有正常工作，请参阅我的更新。如何做到这一点？我宁愿将警报的可见性放在父组件上，否则在装载警报时，警报总是需要设置为可见，而不是由父组件控制。从评论中，我看到作用域插槽确实解决了问题。。我可以传递一个自定义按钮并自己在父级中设置它的处理程序。但实际上我不喜欢这个语法，它不够清晰。我宁愿按指示的方式去做。我找不到如何在内部指令和componentdirective之间进行通信，这些指令在最新版本中已经更改，不再链接到组件实例，而只链接到DOM节点（使它们对于集成js库非常有用）。如果你真的想按指令的方式去做，那就太麻烦了，你可以直接在DOM节点上持久化状态。你能举个例子吗，你说的在DOM节点上持久化状态是什么意思？或者以任何方式为组件提供操作指令，正如我在一些vue组件中看到的那样。“导出”处理函数的时隙范围方式似乎不太直观，如果指令太复杂，也会考虑事件委托（检查事件。目标）。但我更喜欢直接绑定点击事件

<alert>
   <button slot="close">Remove the alert</button>
</alert>

<div class="alert alert-info">
   <slot></slot>
</div>

Vue.component('alert', {
    template: `
  <div class="alert alert-info" v-if="show">
    <slot></slot>
  </div>`,

  data() {
        return {
    show: true
    }
  },
  mounted() {
     // directive event
     this.$root.$on("alert:close", () => this.show = false);
  }
});

Vue.directive('alert-dismiss', {
   inserted: function(el, binding, vnode) {
    el.addEventListener("click", () => {
        vnode.context.$root.$emit("alert:close");
    });
   }
});