How to pass reactive vnode to injected function inside component

Question

This is kind of a followup to my previous question. Basically I try to register a vnode with a parent through an injected function. The solution in the question works (it retains reactivity, but a different problem is created by that. Since this.$ is the component instance and not the vnode (which is this.$.vnode), components trying to access the registered objects children (f.e. slots) via vnode.children will not have access to them.

I created an example HERE to show what I mean.

Looking deeper into it, using this.$.vnode.children also doesn't seem to be the same as the children we get from entries in this.slots.default(), which is strange. I would expect the slot to return the same vnode as the component instance has. Why isn't this the case?

Since this is for a PR towards PrimeVue I am trying to keep the changes to the codebase minimal and backward compatible, so I don't want to change the code that is accessing the children prop to something more clean like slots. Many components in the DataTable use this access.

Thank you in advance :)

Answer 1

After some hours experimenting, I found a solution which seems a bit dirty, but does the trick. Since the codebase of PrimeVue needs access to a children field, which contains the slots, I simply constructed a Proxy and added this field on registration like this:

  // Child.vue
  ...
  mounted() {
    if (this.registerChild && typeof this.registerChild === "function") {
      this.$.children = new Proxy(this.$.slots, {}) // This does the trick
      this.registerChild(this.$)
    }
  }
  ...

Full example HERE.

The change was introduced to the PrimeVue PR.

If you know of any cleaner way, I'd be happy to hear it! :D