I ran into the following issue while working on a Vue 2.6.x project, and I just can't figure out what's going wrong :/
Hopefully, my example below explains my problem clearly.
Context:
- I have a Parent component, which has a default slot, and I'd like to display some stuff in the default slot of that component.
- The Parent component contains two child components both of them have a named slot called "content". These child components are nested in the Parent, the first renders the second in its #content slot, and the second renders the Parent's #default slot in its #content slot.
Observation:
- The reactivity inside the Parent's default slot is broken as long as the two nested child components' slot names match. (If we reused one of the WithContentSlot components twice, it would give the same result).
Expected result:
- the counter in the #default slot of the Parent should increment as well, when pressing the button
Please tell me know if you have any idea what's going wrong, or if you know a workaround. In my real project I'm working with a bunch of renderless components which expose some of their logic via slotProps on their #default slot in order to be neat & reusable, but this bug is driving me crazy, since if I nest any two of them, then I run into this issue.
const WithContentSlotOne = Vue.extend({
template: `<div><slot name="content"/></div>`,
});
const WithContentSlotTwo = Vue.extend({
template: `<div><slot name="content"/></div>`,
});
const Parent = Vue.extend({
components: {
WithContentSlotOne,
WithContentSlotTwo
},
template: `
<with-content-slot-one>
<template #content>
<with-content-slot-two>
<template #content>
<slot />
</template>
</with-content-slot-two>
</template>
</with-content-slot-one>
`,
});
const app = new Vue({
components: {
Parent
},
el: "#app",
template: `
<div>
<div>count: {{ counter }}</div>
<button @click="counter++">
increment
</button>
<Parent>
count: {{ counter }}
</Parent>
</div>`,
data() {
return {
counter: 0
};
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.js"></script>
<div id="app" />