Vue绑定到动态插槽元素?

时间:2018-06-10 22:51:43

标签: javascript vue.js vue-component bootstrap-vue

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

<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中看到的那样。 如何使这种模式有效?

1 个答案:

答案 0 :(得分:2)

要从子元素(<my-table>)向其父元素提供数据和操作,您可以查看scoped slots

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

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

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