0

Problem desription

I am trying to access Vue child components passed in a slot.

I do it with the following approach: this.$slots.default()

I receive the components and I can even access and call methods of a component using the following approach: this.$slots.default()[1].type.methods.methodName

The problem is that within the child component this keyword has now changed to another type where you can only access methods defined in that component and restricted variables. And so for example you can't access this.$refs (which I actually need) or this.$el or anything else except defined methods and some variables.

What I've tried

I've tried assigning this.$refs to a variable within the onmount function and then trying to access it when calling a method from the parent component, but you can't access that variable.

In Vue2 you have full access to the child component and this would work.

Is there a way to fix it in Vue3?

Mykhailo Galenda
  • 1
  • 1
  • Please, show the whole example and explain what you want to achieve. It looks like XY problem. "access and call methods of a component using the following approach" - this looks like bad design and should be never done under normal circumstances. – Estus Flask Oct 28 '21 at 17:18
  • I don't think this is possible in Vue3 since VNodes are context-free. See https://github.com/vuejs/vue-next/issues/2. – User 28 Nov 01 '21 at 10:58

0 Answers0