Custom event handler in v node data object

Question

In my child component I have an custom click handler that emits an event like this:

this.$emit('nextslide');

And in my parent component I try to catch the event like this:

render(createElement) {
    return createElement(
        'div',
        {
            on: {
                nextslide: this.triggerFunction,
            }
        },

        this.$slots.default,
    )
},

I get no errors at all but it is also not working. I'm wondering if you can actually catch and event like this.

The page:

<carousel>
    <slide-next>
    </slide-next>
</carousel>

Carousel.vue:

<script>
    export default {

        render(createElement) {
            return createElement(
                'div',
                {
                    on: {
                        nextslide: this.triggerFunction,
                    }
                },
                this.$slots.default,
            )
        },

        methods: {
            triggerFunction() {
                console.log('this should trigger');
            },
        }
    }
</script>

SlideNext.vue

<script>
    export default {

        render(createElement) {
            return createElement(
                'div',
                {
                    on: {
                        click: this.clickHandler
                    },

                },
                'Next')
        },

        methods: {

          clickHandler() {
              this.$emit('nextslide');
              console.log('trigger emit');
          },

        },

    }
</script>

Roland · Accepted Answer · 2018-05-12 16:56:20Z

1

So you want in parent component, to listen to event created in child component.Take a look here: See it in action

Child component:

Vue.component('child-component', {
    data: function() {
    return {
        text: 'hi i am a text from child component'
    }
  },
  render(h) {
    return h('div', {
        class: ['text'],
      on: {
        click: this.clicked
      }
    },
    ['Click me,please']
    )
  },
  methods: {
    clicked() {
        this.$emit('click', this.text)
    }
  }
})

Parent component:

Vue.component('parent-component', {
    render (h) {
    return h('child-component', {
        on: {
        click: this.clicked
      }
    })
  },
  methods: {
    clicked(data_passed_from_child) {
        alert(`From child passed: ${data_passed_from_child}`)
    }
  }
})

And finally to make this to work:

<div id="app">
  <parent-component></parent-component>
</div>

new Vue({
  el: "#app",
})

answered May 12, 2018 at 16:56

Roland

28.1k9 gold badges108 silver badges103 bronze badges

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

4 Comments

twoam Over a year ago

This works! but how do I return more child components?

Roland Over a year ago

I answer your question and you have to appreciete this i think.Anyway you can take a look here for another questions: vuejs.org/v2/guide/render-function.html

twoam Over a year ago

I really do appreciate it.

Roland Over a year ago

Glad to help you

Decade Moon · Accepted Answer · 2018-05-12 15:00:17Z

1

You're registering the listener on a <div> element instead of the component. Component events do not bubble, unlike native DOM events, so you can only register the nextslide event on the child component vnode directly instead of an ancestor.

I can't see from your example where the relationship between the parent and child component is – your parent component isn't rendering the child component directly (unless it's in the default slot).

answered May 12, 2018 at 15:00

Decade Moon

34.4k8 gold badges84 silver badges104 bronze badges

3 Comments

twoam Over a year ago

Ah makes sense... Yes my child component is in the default slot. I am not clear on the "so you can only register the nextslide event on the child component vnode directly" do I have to move my triggerFunction to my child component instead?

Decade Moon Over a year ago

All I meant by that was you can only have the { on: { nextslide: this.triggerFunction } } bit for the child component (whatever that is) and not a 'div'.

twoam Over a year ago

I edited my question with the components, would you mind to take a look and help me with how I can achieve this?

Collectives™ on Stack Overflow

Custom event handler in v node data object

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related