[Vuejs]-Custom event handler in v node data object

by

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",
})
👤Roland

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).

👤Decade Moon

Leave a comment