vue动态组件

实现步骤：

• 引入注册

// 引入
import LeftCom from '@/components/Left-com'
import RightCom from '@/components/Right-com'
import ContentCom from '@/components/content-com'
​
// 注册
export default {
  name: 'HomeView',
  data() {
    return {
      componentsArr: [
        {
          id: 1,
          name: '左边容器',
          comName: 'LeftCom',
          show: false
        },
        {
          id: 2,
          name: '中间容器',
          comName: 'ContentCom',
          show: false
        },
        {
          id: 3,
          name: '右边容器',
          comName: 'RightCom',
          show: false
        }
      ]
    }
  },
  components: {
    LeftCom,
    RightCom,
    ContentCom
  }
}

• 点击的按钮

​
<div class="com-nav">
  <ul v-for="item in componentsArr" :key="item.id">
    <li @click="selectItem(item)">{{ item.name }}</li>
  </ul>
</div>

• 动态显示的组件模块

<div class="com-box">
  <template v-for="item in componentsArr">
    <component :key="item.id" :is="item.comName" v-if="item.show" />
  </template>
</div>

• 动态组件显示与隐藏切换的方法

selectItem(item) {
  console.log(item)
  this.componentsArr.map((elm) => {
    elm.id === item.id ? (elm.show = !elm.show) : (elm.show = false)
    return elm
  })
}