Javascript is required
Mokkapps Logo

Vue Tip: Expose Properties in a Script Setup Component

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
Oct 8, 2022
1 min read
|
78 views
Template
Script
Expose Properties in a Script Setup Component Image

Components using Options API or Composition API without <script setup> are open by default.

Info

Only components using <script setup> are closed by default.

If we try to access the public instance of such a component via template ref or $parent chains, it will not expose any of the bindings declared inside the <script setup> block.

We can use the defineExpose compiler macro to explicitly expose properties:

Child.vue
<script setup>import { ref } from 'vue'const foo = ref('foo')const bar = ref('bar')defineExpose({  foo,  bar,})</script>

When a parent gets an instance of Child.vue via template ref, the retrieved instance will be of the shape { foo: string, bar: string } (refs are automatically unwrapped just like on normal instances):

Parent.vue
<template>  <Child ref="child" /></template><script setup>import { ref } from 'vue'const child = ref(null)onMounted(() => {  console.log(child.value.foo)  console.log(child.value.bar)})</script>

If you liked this Vue tip, follow me on Twitter to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue newsletter.