Javascript app.vue中的嵌套组件无法通过

main.js文件：

import Vue from 'vue'
import App from './App.vue'

import Parent from './assets/components/frame/Parent.vue';
import LeftSide from './assets/components/frame/LeftSide.vue';
import RightSide from './assets/components/frame/RightSide.vue';

import HeaderLeft from './assets/components/header/HeaderLeft.vue';
import HeaderRight from './assets/components/header/HeaderRight.vue';

Vue.component('Parent', Parent);
Vue.component('LeftSide', LeftSide);
Vue.component('RightSide', RightSide);
Vue.component('HeaderLeft', HeaderLeft);
Vue.component('HeaderRight', HeaderRight);

new Vue({
  el: '#app',
  render: h => h(App)
})

app.vue文件不工作，网页上未显示任何数据。当通过dev工具检查页面时，父div在那里，但它是空的。我希望左侧和右侧嵌套在其中

<template>
<div>
  <Parent>
    <LeftSide>
    </LeftSide>
    <RightSide>
    </RightSide>
  </Parent>
</div>
</template>
<script>
</script>
<style>
</style>

当修改为以下内容（排除“父项”）以不包含嵌套组件时，数据（左侧和右侧）将很好地输出到网页

<template>
<div>
    <LeftSide>
    </LeftSide>
    <RightSide>
    </RightSide>
</div>
</template>
<script>
</script>
<style>
</style>

下面的父组件

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


<script>
</script>


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

父母亲
{
显示器：flex；
}

我将LeftSide和RightSide移动到Parent.vue中，而不是将LeftSide和RightSide放在app.vue的父级中，从而修复了此问题

正如您已经了解的那样，您应该将这些组件移动到

父组件中

但在某些情况下，您希望有一个可重用组件作为装饰器（类似于面板）并将元素放置在其中。在这种情况下，您正在寻找。使用插槽，您确实可以编写以下内容：

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

父组件看起来像什么？已添加。我是否需要将左侧和右侧嵌套在父文件中？我想，既然我将它们包含在app.vue的父组件中，它就会将它们包含在父组件中。
<template>
<div class="parent">
    <slot></slot>
</div>
</template>


<script>
</script>


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