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

Comments

[sureshvv]

Nice job. Came in handy, defineExpose needs more exposure.

[cfa532]

I am using to wrap , so it can swith among image, video and file dynamically. In this scenario, the exposed function defined in child component is undefined when called in parent component. I guess the exposed function is lost during the polymorphism magic.

[m3hdi rostami]

perfect, thanks

[Sloan the DEV Moderator]

Hey, this article seems like it may have been generated with the assistance of ChatGPT.

We allow our community members to use AI assistance when writing articles as long as they abide by our guidelines. Could you review the guidelines and edit your post to add a disclaimer?

Guidelines for AI-assisted Articles on DEV

Erin Bensinger for The DEV Team ・ Dec 19 '22

#meta #chatgpt #writing #abotwrotethis