Vue Tip: Expose Properties in a Script Setup Component

Components using Options API or Composition API without <script setup> are open 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:

1<script setup>
2import { ref } from 'vue'
3
4const foo = ref('foo')
5const bar = ref('bar')
6
7defineExpose({
8  foo,
9  bar,
10})
11</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):

1<template>
2  <Child ref="child" />
3</template>
4
5<script setup>
6import { ref } from 'vue'
7
8const child = ref(null)
9
10onMounted(() => {
11  console.log(child.value.foo)
12  console.log(child.value.bar)
13})
14</script>