Vue之动态组件(二)

Vue之第二篇章学习（动态组件、插槽、自定义指令）

1.动态组件

动态组件指的是：动态的切换组件的显示与隐藏

我们之前可以使用v-if来显示、隐藏组件，但是这样代码臃肿，冗余。我们这里用到Vue的内置组件《component》

示例代码：

<template>
  <div id="app">
   <component :is="comName"></component>
  </div>
</template>

<script>
import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'
export default {
   
  name: 'App',
  data(){
   
    return {
   
      comName: 'Left'
    }
  },
  components: {
   
   Left,
   Right
  }
}
</script>

利用Vue内置组件《component》并且绑定is属性，通过绑定is的属性值为变量，来动态切换组件。（比如app下面的“首页”、“我的”切换）

1.1《keep-alive》

但是使用上面《component》，我们发现如果切换回原来的组件的时候，组件会被重新创建，并不会缓存之前的状态。

示例代码：

<template>
  <div id="app">
    <keep-alive>
      <component :is="comName"></component>
    </keep-alive>
  </div>
</template>

<script>
import Left from "@/components/Left.vue";
import Right from "@/components/Right.vue";
export default {
   
  name: "App",
  data() {
   
    return {
   
      comName: "Left",
    };
  },
  components: {
   
    Left,
    Right,
  },
};
</script>

默认被包裹在keep-alive中的所有组件会被缓存，就可以保持之前的状态。