This query pertains to the return of render function in setup.
Let's consider a component called Foo:
// Foo.tsx
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup() {
// 👇 How can we access `number` outside the `Foo` Component?
const number = ref(0)
return () => <div>{number.value}</div>
},
})
Is it necessary to use data to expose the variable number? For example:
// Foo.tsx
import { defineComponent, getCurrentInstance } from 'vue'
export default defineComponent({
data() {
return {
// 👇 Exposing `number` outside the component
number: 0,
}
},
setup() {
return () => <div>{getCurrentInstance()?.data.number}</div>
},
})
// FooContainer.tsx
import Foo from '@/views/Foo'
import { defineComponent, onMounted, ref } from 'vue'
export default defineComponent({
setup() {
const foo = ref<InstanceType<typeof Foo>>()
// 👇 Using `Foo`'s `number` in `FooContainer`
onMounted(() => console.log(foo.value?.number))
return () => <Foo ref={foo} />
},
})
Any alternative methods to access the inner state variable number from Foo's setup without exposing it via data?