0👍
From Vue 3 docs:
Components using
<script setup>
are closed by default – i.e. the public instance of the component, which is retrieved via template refs or$parent
chains, will not expose any of the bindings declared inside<script setup>
.To explicitly expose properties in a
<script setup>
component, use thedefineExpose
compiler macro:<script setup> import { ref } from 'vue' const a = 1 const b = ref(2) defineExpose({ a, b }) </script>
When a parent gets an instance of this component via template refs, the retrieved instance will be of the shape
{ a: number, b: number }
(refs are automatically unwrapped just like on normal instances).
In your case, to expose globalData
:
<script setup lang="ts">
⋮
const globalData = {
text: 'mytext'
}
defineExpose({ globalData })
</script>
Source:stackexchange.com