vuejs / vuejs/core

Inconsistent component ref when using `defineExpose`

Open
#9,136 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

:lady_beetle: bug scope: script-setup
Dominant language
TypeScript
Stars
54.4k
Forks
9.2k
Avg merge
1d 5h
Merged PRs (30d)
140

Description

Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNrVVEtv2zAM/iuEL3GBxMbanTI36B4F1mFYi67YLr54Nv3oZEmQ5DRFlv8+SnJSO2mBPQ+9CBIfIj/yI9fBaymjZYfBPEh0rhppQKPpJLCMV6dpYHQaLFLetFIoA2tQWE7hLjN5DRsolWhhQt6TncVb0cpeHsX2YT+fvBrpvzamPl9JoXFk+SDe+qQ8F1x7J8GRm2ssX8CpTSK5IEXGc7y5l5gYOkTp7BbwA3jH2CK05xH94rINR39MIVxm7AhOF7BOOYANIxhGTFRhGnwUVdXwCtr7KyV6NKZGsuq/6KtQoxoK312ef/40uYE6WyIUWDYcPZx5Gtg8xmEofuQDWN3GHo/BPf4HcI//G9y/wZrEnm/ELqCXwVayzKB9QuJoRGGJgaPGpUGfJineI2OCBPGDy4BZh87HB85WYr2TeBc9mAaeqbM2k9GtFpwmwxUt7RU0EHNfRisjptp3GtTGSD2P47zg5FYga5Yq4mhiLtv4jMxi1XHTtDgrRHt2Ep1EL+Oi0WYojlC3s29K3GlU9EkaTAdhYhIuUc0U8oI6oX417J7bMPSe6iC8jb6hhlFRjKaGlk21VxJLh4ahupSmoYaPSpNRhe8+OJlRHe6w5DXm3x+R3+qVx3Sl0GU2wG8yVaHxapoyXNF9p2xF0bG+DU8or5HI2NkcvdmbjheU9sDOZXvhOkzDcKPPVwa53oKyibpqOHvXD0utp6A/pEvVHlRxuxB/Y9uO1qwbHCSCk7bhBlWZ5QiW0nob3DN8DtoowmHHzfr4EXWGiTsX4XDjtPdfMtah3zVhmTGNVj0Y0f0JBVivtxtjQyHGI3S4zp8J4q2fTzy0EL2dW1p/WI/NTy+bkoY=

Steps to reproduce

The exposed vue instance when adding a ref to a Vue component in Script Setup differs if you have defined exposes with defineExpose().

Create two components, which take a single prop, identical except that one has a defineExpose.

Import these components in a parent component, and set a ref on them. Then log that ref's value.myProp (in a watcher, or onmounted).

What is expected?

The two logs log the same value.

What is actually happening?

If you do not have a defineExpose in your component, a parent component can access the props sent to that component via myRef.value.myProp, but as soon as you define exposes in the component, myRef.value.myProp returns undefined.

System Info

No response

Any additional comments?

The documentation for defineExpose (https://vuejs.org/api/sfc-script-setup.html#defineexpose) doesn't mention anything about that using it change the behaviour of other properties on the ref. So either it seems the documentation is unclear and needs to be clarified, or it is indeed a bug.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked Vue Playground reproduction and compare the two Script Setup components, one using defineExpose() and one without it. Trace how the parent component's ref exposes myProp, then check the defineExpose documentation; done means the behavior is resolved or clearly documented, with the expected ref value consistent between the components.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.