In this article, you will learn how you can pass a function as a prop in a component in Vue.js. Passing a function will be a handy situation where you want to display your child component and want to call an event sourced from a child-parent component. In this example, I am going to create two props and they will be passed from the parent component. The two props are described as below:

• Data Array
  

  I will pass an array contains an array of string which store fruits' name and I will declare this prop name as fruits.

• Event Function
  

  I will create a prop with a function type that will pass a fruit name. I will declare this prop name as onClick.

Here is the full code of the App.vue file.

<template>
  <div id="app">
    <child-component :onClick="sampleFunction" :fruits="sampleData"></child-component>
  </div>
</template>

<script>
import ChildComponent from './components/ChildComponent.vue'

export default {
  name: 'app',
  data(){
    return{
      sampleData: ["Apple", "Banana", "Mango", "Strawberry"]
    }
  },
  components: {
    'child-component' : ChildComponent
  },
  methods: {
    sampleFunction(fruitName){
      alert("You have selected: " + fruitName)
    }
  }
}
</script>

Let me explain how it works for the parent main app file. If you see the declaration of the child component. I have passed one data which is an array of fruits named: SampleData. And the second data I pass is a function name. Note: You do not include any parentheses or parameters when passing a function in a prop. As the parameter will be passed on from child component. One thing to remember when you bind a prop with is started with the :. You have to make sure that the name of the prop has to be exactly the same. The double colon is a shortcut of v-bind:. Alternatively, you can use this one.

 <child-component v-bind:onClick="sampleFunction" v-bind:fruits="sampleData"></child-component>

The function I have created in the parent file will be pretty simple. It will accept one argument string which is the fruit name. When it runs, it will alert what fruit name you have selected based on the display in the child component.

And here is the full code of Child Component file.

<template>
  <div>
      <ul>
        <li v-for="fruit in fruits">
           <button type="button" @click='onClick(fruit)'> {{ fruit }}</button>
        </li>
      </ul>
  </div>
</template>

<script>
export default {
  props: {
    onClick: Function,
    fruits: Array
  }
}
</script>

<style>
ul, ul li{
  list-style:none;
  margin-bottom:5px;
}
</style>

In the child component itself, you will notice I have declared two props with two different types which are an Array and a function. The array data in this example will be used to display a list of buttons with Fruit name on it. Then I bind the click event function on the button by using the keyword @click. Alternatively, you can use v-on:click if you want to. As you can see the function onClick will represent the function pass by the parent with a parameter string (fruit name) on it. Here is how it will work when you run the Vue.js app.