Pass Function from Parent to Child in Vue/Nuxt 3 Composition API: A Comprehensive Guide

The Basics: Passing Functions as Props

In Vue/Nuxt 3 Composition API, you can pass functions as props using the `setup` function. Here’s an example:

// Parent.vue
<template>
  <ChildComponent :func="myFunction" />
</template>

<script>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  setup() {
    const myFunction = () => {
      console.log('Hello from parent!')
    }

    return {
      myFunction
    }
  }
}
</script>

In the above example, the `myFunction` is defined in the `setup` function of the parent component and passed as a prop to the child component using the `:func` shorthand. The child component can then access the function using the `props` object:

// ChildComponent.vue
<template>
  <button @click="props.func">Click me!</button>
</template>

<script>
export default {
  props: {
    func: Function
  }
}
</script>

Passing Arguments to the Function

In many cases, you’ll want to pass arguments to the function being passed as a prop. One way to do this is by using an arrow function as the prop value:

// Parent.vue
<template>
  <ChildComponent :func="(arg) => myFunction(arg)" />
</template>

<script>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  setup() {
    const myFunction = (arg) => {
      console.log(`Hello from parent! ${arg}`)
    }

    return {
      myFunction
    }
  }
}
</script>

In the above example, the `myFunction` function is wrapped in an arrow function that takes an `arg` parameter. When the `func` prop is called in the child component, it will pass the `arg` value to the `myFunction` function:

// ChildComponent.vue
<template>
  <button @click="props.func('world')">Click me!</button>
</template>

<script>
export default {
  props: {
    func: Function
  }
}
</script>

Using the `inject` Function

In Vue/Nuxt 3 Composition API, you can also use the `inject` function to pass functions as props. The `inject` function allows you to inject a function into a child component’s scope:

// Parent.vue
<template>
  <ChildComponent />
</template>

<script>
import { ref, provide } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  setup() {
    const myFunction = () => {
      console.log('Hello from parent!')
    }

    provide('myFunction', myFunction)

    return {}
  }
}
</script>

In the above example, the `myFunction` function is provided to the child component using the `provide` function. The child component can then inject the function using the `inject` function:

// ChildComponent.vue
<template>
  <button @click="$myFunction">Click me!</button>
</template>

<script>
import { inject } from 'vue'

export default {
  setup() {
    const myFunction = inject('myFunction')

    return {
      $myFunction: myFunction
    }
  }
}
</script>

Best Practices and Gotchas

When passing functions as props, there are a few best practices and gotchas to keep in mind:

• Avoid using `this`**: When passing functions as props, avoid using `this` to reference the parent component’s scope. Instead, use an arrow function or the `inject` function to capture the correct scope.
• Use type annotations**: Use type annotations to specify the function type in the child component’s `props` object. This helps catch type errors and improves code readability.
• Be mindful of scope**: Be careful when passing functions as props, as they can create tight coupling between components. Make sure to keep the function’s scope limited to the component that needs it.
• Use a centralized function hub**: Consider creating a centralized function hub that exposes functions to child components. This can help keep your code organized and reduce coupling.