vue中component实现动态组件的渲染，实现动态组件切换的效果

实现动态组件切换的效果
在vue项目中添加以下代码

App.vue页面

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <hr />

    <button @click="comName = 'Left'">展示Left</button>
    <button @click="comName = 'Right'">展示Right</button>

    <hr />
    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <!-- component标签是vue内置的，作用：组件的占位符 -->
      <component :is="comName"></component>
    </div>
  </div>
</template>

<script>
import Right from '@/components/Right.vue'
import Left from '@/components/Left.vue'

export default {
  data() {
    return {
      // 要展示的组件的名字
      comName:'Left'
    }
  },
    components:{
      Right,
      Left
    }
}
</script>

<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>

Left页面

<template>
    <div class="left-container">
        <h3>Left 组件</h3>
      </div>
</template>

<script>
export default {

}
</script>

<style lang="less">
.left-container {
  padding: 0 20px 20px;
  background-color: orange;
  min-height: 250px;
  flex: 1;
}
</style>

Right页面

<template>
    <div class="right-container">
        <h3>Right 组件</h3>
      </div>
</template>

<script>
export default {

}
</script>


<style lang="less">
.right-container {
  padding: 0 20px 20px;
  background-color: lightskyblue;
  min-height: 250px;
  flex: 1;
}
</style>

点击两个按钮可切换不同的组件的背景色