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
DefineTemplate / ReuseTemplate - Slotted content is incorrectly used between instances #3881
Comments
So, I think the long and the short is that documentation is currently wrong (or this is a legit bug). It says:
This seems to work only if your template is not bound to the state of the current instance, as it's defined outside of the setup process. Here is the corrected code (using setup properly, similar to <script>
import { defineComponent } from 'vue'
import { createReusableTemplate } from '@vueuse/core'
export default defineComponent({
setup() {
const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
return { DefineTemplate, ReuseTemplate }
},
})
</script>
<template>
<component :is="DefineTemplate" v-slot="{ data, msg, anything }">
<div>{{ data }} passed from usage</div>
</component>
<component :is="ReuseTemplate" :data="data" msg="The first usage" />
</template> That said, maybe there's another way to pass in components that would correctly re-use slots from the parent? 🤷♂️ It's possible that these components are just defined incorrectly, and are somehow memo-izing what's being passed into the slot? I feel like other components passed to the Options API handle slotted content correctly, but |
Oh yeah! I see the issue!
Therefore, by calling The way you could make this work according to the example, might be something like the following:
|
Describe the bug
If
<DefineTemplate>
has a slot, this slot will be re-used between component instances.Reproduction
https://stackblitz.com/edit/vitejs-vite-hrgeva?file=src%2FApp.vue,src%2FMyComponent.vue
System Info
Used Package Manager
npm
Validations
The text was updated successfully, but these errors were encountered: