`defineExpose` for using composition api with jsx/tsx syntax
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?