currently I am working on a PR to the primefaces/primevue repository, which will provide the ability to wrap Column components in custom components for the DataTable.
As you can see in the PR (see the previous link) I added a way for Column components to register themselves with the parent DataTable by using the Provide/Inject funcitonality, instead of relying on this.$slots.default to find child Column components like it is currently done in DataTable.
But I found one issue. When a property of my wrapper Column changes, the rendered DataTable doesn't reflect that. After digging deeper I noticed, that this.$.vnode seems to loose it's reactivity when it registers itself with the DataTable.
I could reproduce this with a small example in the Vue 3 Playground HERE. Click on the button and you will see, that the change in the Child component value prop is only picked up, when it is accessed through this.$slots.default. I also tried making the registeredChildren array explicitly reactive by using the following in Parent.vue:
setup(){
const registeredChildren = reactive([])
return {registeredChildren}
}
My question is: What are the differences between accessing a vnode by using this.$slots.default and by saving the vnode in an array? How can I make sure, that changes in the vndoe are reflected, by using Provide/Inject?
Any and all help is very much appreciated, thank you!
As it happens, shortly after posting the question I randomly tried using this.$ instead of this.$.vnode and now it works.
So the answer to the question is: There is no difference, if you pass in the correct value.
I updated the playground example.