Subscribe on changes!

Get component instances in multi-level nested slots

avatar
Aug 24th 2021

Version

3.2.4

Reproduction link

https://codesandbox.io/s/confident-jang-xl3zj?file=/src/components/VueButtonBox.vue

Steps to reproduce

 <button-box>
     <button />
     <button />
     <button />
<button-box>

// just slots.default().forEach(button => ...)
// but like this: 

 <button-box>
  <box-wrapper>
     <button />
     <button />
     <button />
 </box-wrapper>
<button-box>

// how can l get the button component instance in the parent component?

What is expected?

Get component instances in multi-level nested slots.

What is actually happening?

Iterate through multiple layers of slots to get the required components.

avatar
Aug 24th 2021

maybe you can use slots.default()[0].children.default() to get the component instances

avatar
Aug 24th 2021

It’s not a good practice to get slots manually, for this scenario, you can use provide & inject to achieve the goal: https://codesandbox.io/s/billowing-hooks-k8x0n?file=/src/components/VueButton.vue