When running this demo and selecting "modify in child", the text will be updated. However, if you choose "modify top level through slot", the text remains unchanged, and attempting to click the other button afterwards will not work.
Is there a way to update a top-level property of the slot? For instance, a boolean or string. It seems that modifying it directly within the child component works fine, but doing so through the slot does not.
If the data object in the child contains nested properties, it is possible to modify a sub-property through the slot (see the original version of this question for a demonstration), but updating a top-level property seems to be problematic.
const Child = {
template: `<div>
{{ object }}
<slot name="named" v-bind="object">
</slot>
<button @click="click">child</button>
</div>`,
data() {
return {
object: {
string: "initial"
}
}
},
methods: {
click() {
this.object.string = "modified in child"
}
}
}
new Vue({
components: {
Child,
},
template: `
<div class="page1">
<Child>
<template v-slot:named="slot">
<button @click="click(slot)">modify top level through slot</button>
</template>
</Child>
</div>`,
methods: {
click(slot) {
slot.string = "updated top level through slot"
}
}
}).$mount('#app')<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fe888b9bbeccd0c8d0cfcf">[email protected]</a>/dist/vue.min.js"></script>