Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
qmhc opened this issue Feb 12, 2022 · 1 comment
Closed

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

qmhc opened this issue Feb 12, 2022 · 1 comment

Comments

@qmhc
Copy link

qmhc commented Feb 12, 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?

@yyx990803
Copy link
Member

https://vuejs.org/api/composition-api-setup.html#exposing-public-properties

@github-actions github-actions bot locked and limited conversation to collaborators Oct 3, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants