Компонент Renderless Vue со слушателем щелчка - PullRequest
Новая
       8

Компонент Renderless Vue со слушателем щелчка

0 голосов
/ 30 сентября 2018

Я прочитал этот пост, в котором подробно рассматриваются компоненты без рендеринга:

https://adamwathan.me/renderless-components-in-vuejs/

Компонент без рендеринга будет выглядеть примерно так: 

export default {
  render() {
    return this.$scopedSlots.default({})
  },
}

Теперь я хотел бы использовать этот компонент без рендеринга, а также добавить прослушиватель щелчка для всего, что передается в слот.

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

Как мне добавить обработчик щелчков к элементу, который передается в слот?

Ответы [ 2 ]

0 голосов
/ 30 сентября 2018

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

См. Аргументы createElements , второй аргумент - это объект для улучшения

Объект данных, соответствующий атрибутам, которые вы будете использовать в шаблоне.Необязательно. 

console.clear()
Vue.component('renderless', {
  render(createElement) {
    var vNode = this.$scopedSlots.default({})
    var children  = vNode.children || vNode.text
    const clone = createElement(
      vNode.tag, 
      {
        ...vNode.data, 
        on: { click: () => alert('clicked') }
      },
      children
    )
    return clone
  },
});
new Vue({}).$mount('#app');
<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>

<div id="app">
  <renderless>
    <button type="button" slot-scope="{props}">Click me</button>
  </renderless>
</div>
0 голосов
/ 30 сентября 2018

Вот один из способов.

Ваша оболочка без рендеринга будет состоять из одного action (то есть, функции для выдачи запроса AJAX) prop. 

Vue.component('renderless-action-wrapper', {
  props: ['action'],
  render() {
    return this.$scopedSlots.default({
      action: this.action,
    });
  },
});

Тогда другой компонент, который использует вышеупомянутую оболочку, будет заключать настраиваемый слот с обработчиком @click, который вызывает действие, которое передается при запуске. 

Vue.component('clickable', {
  props: ['action'],
  template: `
    <renderless-action-wrapper :action="action">
      <span slot-scope="{ url, action }">
        <span @click="action()">
          <slot name="action"></slot>
        </span>
      </span>
    </renderless-action-wrapper>
  `,
});

Наконец, подключите специализированную версию оболочки. 

<clickable :action="doAjaxRequest">
  <button type="button" slot="action">Button</button>
</clickable>

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

...