Subscribe on changes!

`defineExpose` for using composition api with jsx/tsx syntax

avatar
Feb 12th 2022

What problem does this feature solve?

When some api methods don't use setup context, it can be exposed like following:

import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    retrun () => <div></div>
  },
  methods: {
    doSomething() {}
  }
})

But it difficulty to expose some api methods which are using setup context when using composition api with tsx syntax.

import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const input = ref<HTMLElement | null>(null)

    // How to expose this method?
    function focus() {
      input.value?.focus()
    }

    retrun () => <input ref={input} />
  }
})

What does the proposed API look like?

import { defineComponent, ref, defineExpose } from 'vue'

export default defineComponent({
  setup() {
    const input = ref<HTMLElement | null>(null)

    function focus() {
      input.value?.focus()
    }

    // expose like in <script setup>
    defineExpose({ focus })

    retrun () => <input ref={input} />
  }
})

Maybe some important I missed?