How to bubble up a click event from a custom component in vue.js?

Question

I have a custom component <item> which looks like this:

item.vue

<script>
  export default {
    render: function (c) {
      var self = this;
      const contentEl = c('div', {staticClass:'item-content', domProps: {innerHTML: self.content}});
      return c('div', {
        staticClass: 'item',
        class: {
          'item-left': self.side === 'left',
          'item-right': self.side === 'right'
        }
      }, [contentEl])
    },
    props: {
      content: String,
    }
  }
</script>

It can be used like this:

<item :content="Hello world"></item>

This will print "Hello world" and works fine but now I want the item to be clickable like this:

<item v-on:click="myClickEvent" :content="Hello world"></item>

Question:

How can I make the <item> component to fire a click event when its inner <div> was clicked?

I finally got your issue, made a couple of edits... should be fine now :) — klimat
– klimat, Commented Nov 24, 2017 at 12:12

Penny Liu · Accepted Answer · 2022-03-26 06:47:33Z

10

In the child component:

<button @click="$emit('click')"></button>

And then in the parent component:

<MyButton @click="someFunction"/>

edited Mar 26, 2022 at 6:47

Penny Liu

17.9k5 gold badges89 silver badges109 bronze badges

answered Nov 13, 2019 at 16:12

Nathan Wailes

12.6k10 gold badges77 silver badges118 bronze badges

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

Comments

klimat · Accepted Answer · 2017-11-24 12:09:53Z

5

  <template>
    <div id="action-button">
      <input type="button" id="in" @click="clicked" :value="value" />    
    </div>
  </template>

  <script>
  export default {
    name: 'action-button',
    props: {
      'value': String
    },
    methods: {
      clicked () {
        this.$emit('action-button-clicked')
      }
    }
  }
  </script>

And then instead of v-on:click you should use v-on:action-button-clicked="handleClick".

<action-button v-on:action-button-clicked="handleClick"></action-button>

So the general idea is to handle clicks internally and then use emit inside your component.

edited Nov 24, 2017 at 12:09

answered Nov 24, 2017 at 11:41

klimat

25.1k7 gold badges66 silver badges72 bronze badges

3 Comments

Akinjide Over a year ago

You can read more here vuejs.org/v2/guide/…

klimat Over a year ago

@Timo I'm glad I could help. Please upvote the answer as well :)

shuk Over a year ago

shorthand: <button @click="$emit('click')"></button> parent: <CuttomButton @click="myFn"/>

Penny Liu · Accepted Answer · 2022-03-26 06:56:19Z

4

In the child component you can simply do it as @Nathan said.

<button @click="$emit('click', $event)">My button component</button>

Hope it helps

edited Mar 26, 2022 at 6:56

Penny Liu

17.9k5 gold badges89 silver badges109 bronze badges

answered Jun 12, 2020 at 11:15

Purvesh

6447 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to bubble up a click event from a custom component in vue.js?

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related