How to access `setup`'s inner state without exposing it via `data`?

Question

This question is specific to setup returning render function.

For instance, I have a component Foo:

// Foo.tsx
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    // 👇 how to access `number` outside the `Foo` Component?
    const number = ref(0)

    return () => <div>{number.value}</div>
  },
})

Do we have to use data to expose number? For example:

// Foo.tsx
import { defineComponent, getCurrentInstance } from 'vue'

export default defineComponent({
  data() {
    return {
      // 👇 expose `number` to the outside
      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>>()
    //                          👇 use `Foo`'s `number` in `FooContainer`
    onMounted(() => console.log(foo.value?.number))

    return () => <Foo ref={foo} />
  },
})

So, is there any other way to access Foo's setup's inner state number without exposing it via data?

Answer 1

You can expose your data to other components using expose method provided in setup,

// Foo.tsx
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup(props, { expose }) {
    // 👇 how to access `number` outside the `Foo` Component?
    const number = ref(0)

    expose({
        number
    })

    return () => <div>{number.value}</div>
  },
})