VUE绑定到动态插槽元素?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (427)

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

<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按钮,但仍然让组件用户提供他自己的按钮(有时甚至是链接,<a>元素)。

我已经考虑过使用动作按钮的指令,类似于这个库: https//bootstrap-vue.js.org/docs/components/modal 其中模态按钮有一个v-b-modal指令。但无法找到如何做到这一点。

提问于
用户回答回答于

要从子元素(<my-table>)向其父元素提供数据和操作,您可以使用外观作用域

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

但是在你的情况下,因为它是保存数据属性的父级,所以我不确定它是最好的解决方案。孩子不应该改变它。

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

扫码关注云+社区

领取腾讯云代金券