-
-
Notifications
You must be signed in to change notification settings - Fork 8.9k
Description
Vue version
3.4.38
Link to minimal reproduction
Steps to reproduce
There is something really weird happening.
First of all, in the reproduction link I am doing the same as locally, but there the issue is not visible. :(
I import a const (i.e. a string array) and directly pass it to a child component via the same-name shorthand.
In the child the data is not received. It is not in $attrs either. Everything else is passed. But not the imported data.
If I re-assign it to a different variable name, it works:
<script setup lang="ts">
import { linkCollection } from '@/components/overview/myTest'
const linkCollection2 = linkCollection
</script>
<template>
<Comp :link-collection :link-collection2 something="bla" />
</template>
Inside of Comp:
<script setup lang="ts">
const props = defineProps<{
linkCollection: any
linkCollection2: any
}>()
defineOptions({
inheritAttrs: false,
})
console.log('Received data', props)
</script>
Inside Comp I get the following: { "linkCollection2": [ "foo", "bar" ] }
.
Isn't that bizare? I mean, I assigned linkCollection2 from linkCollection and passed BOTH to the Comp, but only the latter gets received.
If I change the same-name shortcut :link-collection
to :link-collection="linkCollection"
, it works as expected. Do I change it back it STILL WORKS - until I restart vite (5.4.2).
Seriously, I don't get it.
Super scary. As the linter and vue-tsc don't complain, but the data is just not there.
What is expected?
Imported data should be passed in same-name shortcut as well.
What is actually happening?
Data is undefined.
System Info
System:
OS: Windows 11 10.0.22631
CPU: (32) x64 Intel(R) Core(TM) i9-14900HX
Memory: 37.14 GB / 63.71 GB
Binaries:
Node: 22.5.0 - C:\Program Files\nodejs\node.EXE
npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
pnpm: 9.5.0 - ~\AppData\Local\pnpm\pnpm.EXE
Browsers:
Edge: Chromium (127.0.2651.74)
Internet Explorer: 11.0.22621.3527
Any additional comments?
No response