Skip to content

defineExpose for using composition api with jsx/tsx syntax #5413

Closed
@qmhc

Description

@qmhc

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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions