Question

我想在组件中传递一个按钮，该按钮将有一个动作。例如，一个表，其中包含＆＃34;添加行＆＃34;功能。

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

或者，这个反汇编的警报：

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

具有以下模板：

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

问题是，我想在组件定义中将事件操作绑定到<slot> ed按钮，但仍允许组件用户提供他自己的按钮（有时甚至是链接，{{1元素）。

我考虑过使用操作按钮的指令，类似于这个库：
https://bootstrap-vue.js.org/docs/components/modal
模态按钮具有<a>指令。但无法找到如何做到这一点。

更新我试图使用指令来实现它。这是我到目前为止： https://jsfiddle.net/uvd6knLh/

v-b-modal

所以我听了指令事件。问题是指令事件将导致所有警报组件关闭，正如您在jsfiddle中看到的那样。如何使这种模式有效？

Answer 1

要从子元素（<my-table>）向其父元素提供数据和操作，您可以查看scoped slots。

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

但是在您的情况下，由于它是包含数据属性的父级，因此我不确定它是否是最佳解决方案。孩子不应该改变它。

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