Vue привязать к элементу динамического слота? - PullRequest
Новая
       36

Vue привязать к элементу динамического слота?

0 голосов
/ 11 июня 2018

Я хочу передать компоненту кнопку в слоте, которая будет иметь действие.Например, таблица с функцией «добавить строку». 

<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 Ответ

0 голосов
/ 11 июня 2018

Чтобы предоставить данные и действия от дочернего элемента (<my-table>) его родительскому элементу, вы можете просмотреть области слотов с областями действия .

Слоты с областями действия действительно хорошо работают, когда у ребенка естькакое-то внутреннее состояние, которое не относится к родительскому элементу или не предоставляет пользовательский атрибут или обратные вызовы дочернему элементу и оставляет разметку и стиль родительскому компоненту.

Однако в вашем случае, поскольку родительский объект содержит data attribute, я не уверен, что это лучшее решение.Дочерний объект не должен изменять его.

Вы можете просто разрешить события в родительском компоненте.

...