Vue2 动态组件

1.什么是动态组件

        动态组件指的就是动态切换组件的显示和隐藏。

2.如何实现动态组件渲染

        vue提供了一个内置的<component>组件，专门用来实现动态组件的渲染。示例代码如下：

         

<template>
  <div id="app">
    <h1>App.vue根组件</h1>
    <hr />
    <!-- 3.点击按钮，动态切换组件的按钮 -->
    <button @click="comName = 'Left'">展示Left组件</button>
    <button @click="comName = 'Right'">展示Right组件</button>
    <div class="box">
      <!-- 渲染Left组件和Right组件 -->
      <!-- 1. component标签是vue内置的 作用：组件的占位符 -->
      <!-- 2. is属性的值，表示要渲染的组件的名字 -->
      <!-- 3. is属性的值，应该是组件在components节点下的注册名称 -->
      <keep-alive>
        <component :is="comName"></component>
      </keep-alive>
    </div>
  </div>