[Vuejs]-Nested components in app.vue not pulling content through

by

0👍

I fixed it by moving LeftSide and RightSide into the Parent.vue, instead of having the LeftSide and RightSide inside the Parent in the app.vue.

0👍

As you already figured out yourself you should move those components into the Parent component.

But there are situations where you want to have a reusable component as decorator (something like a panel) and place elements inside of it. In this case you are looking for slots. Using slot you can indeed write this:

<Parent>
  <LeftSide />
  <RightSide />
</Parent>

And in the Parent component you would need to define where those components have to be placed using <slot></slot>

<template>
<div class="parent">
    <slot></slot>
</div>
</template>


<script>
</script>


<style>
.parent
{
  display: flex;
}
</style>

Leave a comment