Passing functions as props to child components

Question

Assuming I have a component named Modal which I want to reuse across my application and in the meanwhile I also want to dynamically bind functions to its Yes button, how can I pass a function to the @click event of the Yes button in my Modal as a prop. For instance:

//data tags are used for fast markup here only
<tamplate>
    <div>
        <div :id="`${id}`" data-modal>
           <div data-modal-title>
               {{title}}
           </div>
           <div data-modal-body>
               {{body}}
           </div>
           <div data-modal-footer>
               <button @click="//event to be passed//" data-modal-button-ok>Yes</button>
               <button data-modal-button-cancel>Yes</button>
           </div>
       </div>
   </div>
</template>

<script>
   export default {
       name: 'modal',
       props: [
          'id',
          'title',
          'body',
           // event?
       ]
   }
</script>

and when using this modal, how should the event be passed?

<Modal id="x" title="y" body="x" //event="????"//></Modal>

Answer 1

You should $emit an event (name, say, yes ) at the modal:

<button @click="$emit('yes')" data-modal-button-ok>Yes</button>

Or, use a method:

<button @click="handleYesClick" data-modal-button-ok>Yes</button>

methods: {
  handleYesClick() {
    this.$emit('yes');
  }
}

And listen to it in the parent using:

<modal ... v-on:yes="someCodeToExecute"></modal>

or (shorthand):

<modal ... @yes="someCodeToExecute"></modal>

Demo:

 Vue.component('modal', { template: "#modal", name: 'modal', props: ['id', 'title', 'body'] }) new Vue({ el: '#app', data: {}, methods: { methodAtParentYes() { alert('methodAtParentYes!'); }, methodAtParentCancel() { alert('methodAtParentCancel!'); } } }) 

 <script src="https://unpkg.com/vue"></script> <template id="modal"> <div> <div :id="`${id}`" data-modal> <div data-modal-title> {{title}} </div> <div data-modal-body> {{body}} </div> <div data-modal-footer> <button @click="$emit('yes')" data-modal-button-ok>Yes</button> <button @click="$emit('cancel')" data-modal-button-cancel>Cancel</button> </div> </div> </div> </template> <div id="app"> <modal id="1" title="My Title" body="Body" @yes="methodAtParentYes" @cancel="methodAtParentCancel"></modal> </div> 

Answer 2

There are two ways to do this.

---

The first way is you could pass the method down as a prop, just like you would pass anything else and then in the Modal component just call that prop right in the click handler.

Parent.vue

<template>
   <Modal id="x" title="y" body="x" :handleYes="handleYes"></Modal>
</template>
<script>
  methods: {
    handleYes () {
      // do something
    }
  }
</script>

Modal.vue

<button @click="handleYes()">Yes</button>

---

The other way is to use $emit . So in Modal.vue you would define a method to emit an event and then listen for that event in the parent and do call the method there.

Modal.vue

<template>
  <button @click="emitEvent">Yes</button> 
</template>
<script>
  methods: {
    emitEvent () {
      this.$emit('userClickedYes')
    }
  }
</script>

Parent.vue

<template>
   <Modal id="x" title="y" body="x" @userClickedYes="handleYes"></Modal>
</template>
<script>
  methods: {
    handleYes () {
      // do something
    }
  }
</script>