Suppose I have a compound called <myCompound>, how can I access the ref or variables from the outside? For example:
myCompound.vue :
<script setup>
import { ref } from "vue";
const myString = ref("hi string");
</script>
<template>
<div>
<p>{{ myString }}</p>
</div>
</template>
myPage.vue
<script setup>
import myCompound from "./compounds/myCompound.vue";
import { ref, onMounted } from "vue";
const myCompoundRef = ref();
onMounted(() => {
console.log(myCompoundRef.value.myString)
})
</script>
<template>
<div>
<myCompound ref="myCompoundRef" />
</div>
</template>
How can I achieve this with script setup:
myCompound.vue :
<template>
<div>
<p>{{ myString }}</p>
</div>
</template>
<script>
export default {
data() {
return {
myString: "hi string"
}
}
}
</script>
myPage.vue
<template>
<div>
<myCompound ref="myCompoundRef" />
</div>
</template>
<script>
import myCompound from "./compounds/myCompound.vue";
export default {
components: {
myCompound
},
mounted() {
console.log(this.$refs.myCompoundRef.myString)
}
}
</script>
Are there certain ways to achieve this? I am using Nuxt 3, but I am open to other methods. I just want to understand how it all comes together...