Subscribe on changes!

Exposing a template ref does not work properly

avatar
Aug 24th 2022

Vue version

3.2.37

Link to minimal reproduction

https://sfc.vuejs.org/#eNqFk01PwzAMhv+KlcuGtDUqiMvUDSHElQPnXPaRsU7Nh5J0IFX979hpWlpgcGvsN6/tJ27DHq3NLrVkK1b4vSttAC9DbTdCl8oaF6ABJ4/QwtEZBTOUzobUk1E2xTNOB3LCtNB7o32APYZe8fKaLOa6rqoboQve1cEKeAhS2WobJJ4AilO+eanVTjooNaTOVtA0vdNDprt02xYcxfFS7AILrAVLMsE2RewHBQUfSrAF6xpfqq3Nzt5onLohD5ESXjAsRxGKYXE6C3YKwfoV5/64p47OPjPujeNX5modSiUz6dVy58y7lw6NBVuMPDgGL9ItndQH6aT7y/Ob9Icv2bZCtzhKz5tebkRRhOJ0G8EAfLHsxQPMfEozguTpYiSaj5CSeGBK1EdQ4yte2Rx0uLo3+WRx8rQ5iGy0O1R3ujwCuRxLLZ8/rPFy3otiZlisBCd6/kLnLg4pwpROVBOejsmApFMXpbZ1gMtSmYOsEEunEoz/T0PghlzhATgmDZveoRs1v8dxCATAZNi0l6kyLcL4b2LtJ4hUT88=

Steps to reproduce

expose a template ref (with exposed props)

What is expected?

The outer (App.vue) should be able to access the template refs number.

What is actually happening?

he outer (App.vue) is not able to access the template refs number.

System Info

No response

Any additional comments?

Devtools are actually updating compRef.number

image

avatar
Aug 24th 2022

your defineExposecall in Comp.vue is incorrect. defineExpose()expects an object, not a ref.

Consequently your accessing in the parent was also wrong.

https://sfc.vuejs.org/#eNqFk01PwzAMhv+KlcuGtDUqiMvUDSHElQPnXPaRsU7Nh5J0IFX979hp1rWDwa1x7Nd+n7gNe7Y2O9WSLVjht660AbwMtV0JXSprXIAGnNxDC3tnFEwwddJfvRhlUzzjdCAlvBZ6a7QPsMXQOxYvSWKq66q6E7rgXR/sgIcgla3WQeIJoDjkq7dabaSDUkOabAFNc1Z6yugjj1+6S2zbgmNZLI/zYKulYKlAsFURJ8OEgvfN2Ix1FuZqbbOjNxr9N6Qh0oUXDBtThGI4Bp0FO4Rg/YJzv9/SbEefGffB8StztQ6lkpn0ar5x5tNLh8KCzQYaHIMn6eZO6p100v2leZX6Q5dkW6FbtHImT2844ClCcbiPYAAuVM/JPdYrmhEkT4WRaD5ASsk9U6I+gBrf88YOocLNDcpHK5SnHUJkgy2ivuM1EshlX2r5+mWNl9OLF2jjbb9mCVDU/YXQQzQqwphQzCZEHZceS5ddlNrWAU5zZXayQjRdlmD8fyICt+QGE0APZDi9RWc3f0Q7BANgbLh72NSZlmH4b7H2G8s0VHE=

fair point. was more POC

If you don't want to nest these refs, maybe this is what you want?

https://sfc.vuejs.org/#eNqFk01v4yAQhv/KiEsTKTHyrvYSOVmtVr320DOXNCGNK/MhwGkly/+9M0Co3c+bgeF9Zx5eD+yftdWll2zDGn9wrQ3gZejtTuhWWeMCDODkCUY4OaPgBktvytF/o2zerzgtSAmPhT4Y7QMccOseL29JYqH7rlsK3fDkgw64CFLZbh8krgCac72769WDdNBqyJ1tYBiuSn8rnY7HseFYHC/FLtBgK1guE2zXxH6woOHFgq1Yanyt9rZ68kbj1ANpiHzgBUM72qE9NKe1YOcQrN9w7k8H6ujJV8Y9cvyqXK9Dq2QlvVo/OPPspUNhwVYTDY6bF+nWTuqjdNJ9p/mu9IMuyY5CjzjKlTe93ISiCM35VwQD8MbyWlxg1nOaESTPFyPReoKUigtToj6BGl/xi+Sgwiq69UEev45QPctQnUOE9CYxohbmORKI6NRqeftijZeLAdIwm2K4WCxhuyu3q8u+wxfLIy9hjBoljZlodP8E6e9IRoQ50lhNTJNq4Ziqm1ZjI3BZK3OUHbJMVYLxnxEKjFWBOCcHOBJhyZMkKPUfHIeQAcyxpCRkZ0rP9Bdk4yt12GGX

I am looking for a way to easily funnel all the methods to the parent. So that i can wrap a external component to add some extras without losing the api/ without exposing every exposed methode separatly.. 🤔

Like this, maybe its a feature request?

avatar
Aug 7th 2023

your defineExposecall in Comp.vue is incorrect. defineExpose()expects an object, not a ref. Consequently your accessing in the parent was also wrong. https://sfc.vuejs.org/#eNqFk01PwzAMhv+KlcuGtDUqiMvUDSHElQPnXPaRsU7Nh5J0IFX979hp1rWDwa1x7Nd+n7gNe7Y2O9WSLVjht660AbwMtV0JXSprXIAGnNxDC3tnFEwwddJfvRhlUzzjdCAlvBZ6a7QPsMXQOxYvSWKq66q6E7rgXR/sgIcgla3WQeIJoDjkq7dabaSDUkOabAFNc1Z6yugjj1+6S2zbgmNZLI/zYKulYKlAsFURJ8OEgvfN2Ix1FuZqbbOjNxr9N6Qh0oUXDBtThGI4Bp0FO4Rg/YJzv9/SbEefGffB8StztQ6lkpn0ar5x5tNLh8KCzQYaHIMn6eZO6p100v2leZX6Q5dkW6FbtHImT2844ClCcbiPYAAuVM/JPdYrmhEkT4WRaD5ASsk9U6I+gBrf88YOocLNDcpHK5SnHUJkgy2ivuM1EshlX2r5+mWNl9OLF2jjbb9mCVDU/YXQQzQqwphQzCZEHZceS5ddlNrWAU5zZXayQjRdlmD8fyICt+QGE0APZDi9RWc3f0Q7BANgbLh72NSZlmH4b7H2G8s0VHE=

fair point. was more POC

If you don't want to nest these refs, maybe this is what you want? https://sfc.vuejs.org/#eNqFk01v4yAQhv/KiEsTKTHyrvYSOVmtVr320DOXNCGNK/MhwGkly/+9M0Co3c+bgeF9Zx5eD+yftdWll2zDGn9wrQ3gZejtTuhWWeMCDODkCUY4OaPgBktvytF/o2zerzgtSAmPhT4Y7QMccOseL29JYqH7rlsK3fDkgw64CFLZbh8krgCac72769WDdNBqyJ1tYBiuSn8rnY7HseFYHC/FLtBgK1guE2zXxH6woOHFgq1Yanyt9rZ68kbj1ANpiHzgBUM72qE9NKe1YOcQrN9w7k8H6ujJV8Y9cvyqXK9Dq2QlvVo/OPPspUNhwVYTDY6bF+nWTuqjdNJ9p/mu9IMuyY5CjzjKlTe93ISiCM35VwQD8MbyWlxg1nOaESTPFyPReoKUigtToj6BGl/xi+Sgwiq69UEev45QPctQnUOE9CYxohbmORKI6NRqeftijZeLAdIwm2K4WCxhuyu3q8u+wxfLIy9hjBoljZlodP8E6e9IRoQ50lhNTJNq4Ziqm1ZjI3BZK3OUHbJMVYLxnxEKjFWBOCcHOBJhyZMkKPUfHIeQAcyxpCRkZ0rP9Bdk4yt12GGX

I am looking for a way to easily funnel all the methods to the parent. So that i can wrap a external component to add some extras without losing the api/ without exposing every exposed methode separatly.. 🤔

Like this, maybe its a feature request?

I am also looking for a way to easily funnel all the methods to the parent.Did you solve it?