Renderless Vue component with a click listener

Question

I have read this post which goes in depth about renderless components:

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

A renderless component would pretty much look like this:

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

Now I would like to use this renderless component but also add a click listener to whatever is being passed into the slot.

In my case it would be a button. My renderless component would simply wrap a button and add a click listener to it, which in turn performs an AJAX request.

How would I go about adding a click listener to the element that is being passed into the slot?

tony19 · Accepted Answer · 2022-07-15 21:24:38Z

4

Assuming you want to bind the click handler within the renderless component, I think from this post that you need to clone the vnode passed in to renderless, in order to enhance it's properties.

See createElements Arguments, the second arg is the object to enhance

A data object corresponding to the attributes you would use in a template. Optional.

console.clear()
Vue.component('renderless', {
  render(createElement) {
    var vNode = this.$scopedSlots.default()[0]
    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/[email protected]/dist/vue.js"></script>

<div id="app">
  <renderless>
    <button type="button" slot-scope="{props}">Click me</button>
  </renderless>
</div>

edited Jul 15, 2022 at 21:24

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 30, 2018 at 8:02

Richard Matsen

20.9k3 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fredrik Over a year ago

This does not work in 2.6.11, see: codepen.io/Livijn/pen/WNraBZo You need to replace const vNode = this.$scopedSlots.default({}); with const vNode = this.$scopedSlots.default({})[0];

miqh · Accepted Answer · 2018-09-30 03:44:29Z

Here's one way to go about this.

Your renderless component wrapper would consist of a single action (i.e. the function to issue the AJAX request) prop.

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

Then another component which uses the aforementioned wrapper would enclose a customisable slot with a @click handler, which invokes the action that is passed in when triggered.

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>
  `,
});

Finally, wire up the specialised version of the wrapper.

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

Here's a live example of the above suggestion you can play around with.

Collectives™ on Stack Overflow

Renderless Vue component with a click listener

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related