时间戳

首页 > 解决方案 > Vue绑定到动态插槽元素？

javascript - 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 按钮，但仍然让组件用户提供自己的按钮（有时甚至是链接、<a>元素）。

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

更新： 我正在尝试使用指令来实现这一点。这是我到目前为止所拥有的： https ://jsfiddle.net/uvd6knLh/

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");
    });
   }
});

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

标签： javascriptvue.jsvue-componentbootstrap-vue

解决方案

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

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

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

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

推荐阅读