Expose Child Component Methods to Parent Components with Vue 3 defineExpose

Vue 3's Composition API introduces a new method for exposing components' public methods and properties to their parent components called defineExpose. This method allows you to define what parts of your component should be publicly accessible, making it easier to use child components in parent components.

To use defineExpose, you need to define it in your child component and use it to expose the methods or properties you want to make public. Here's an example with Vue 3 (script setup):

childComponent.vue

<template>
  <div>
    <button @click="increment">{{ count }}</button>
  </div>
</template>

<script setup>
  import { ref } from 'vue'

  const count = ref(0)

  const increment = () => {
    count.value++
  }

  const double = () => {
    count.value *= 2
  }

  defineExpose({
    increment,
    count
  })
</script>

In this example, we have a child component that has a count ref and two methods: increment and double. We want to expose the increment method and the count ref to the parent component using defineExpose.

Now let's see how to use this child component in a parent component and access its public methods and properties:

parentComponent.vue

<template>
  <div>
    <ChildComponent ref="child" />
    <button @click="onChildClick">Call Child's Increment Method</button>
    <p>Child's Count: {{ childCount }}</p>
  </div>
</template>

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

  const child = ref(null)
  const childCount = ref(0)

  const onChildClick = () => {
    child.value.increment()
  }

  onMounted(() => {
    childCount.value = child.value.count
  })
</script>

In this parent component, we import the child component and use a ref to access its methods and properties. We can call the child component's increment method by calling child.value.increment(), and we can access its count ref by calling child.value.count.

Using defineExpose can make it much easier to work with child components in parent components because you can control what parts of the child component are accessible and avoid accidentally accessing private methods or properties.

That's it! With defineExpose, you can expose public methods and properties of your child components to their parent components and make your code more organized and easier to use.

Futher Reading:
https://vuejs.org/api/sfc-script-setup.html#defineexpose