bugfix> javascript > 投稿

コンポーネントにスロット内のボタンを渡します。これにはアクションがあります。たとえば、「行の追加」機能を持つテーブル。

<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でわかるように、ディレクティブイベントによってすべてのアラートコンポーネントが閉じられることです。 このパターンを機能させる方法は?

回答 1 件
  • 子要素からデータとアクションを提供するには( <my-table> )その親に対して、スコープスロットの外観を持たせることができます。

    スコープスロットは、子が親に関係のない内部状態を持っている場合、または子にカスタム属性またはコールバックを提供し、親コンポーネントにマークアップとスタイリングを残す場合に非常にうまく機能します。

    ただし、あなたの場合、それは親であるためデータ 属性、それが最善の解決策であるかどうかはわかりません。子供はそれを変異させてはいけません。

    親コンポーネントのイベントを単純に解決できます。

あなたの答え