vue中的动态组件

vue中的动态组件

概念:

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

component:

vue 提供了一个内置的 <component> 组件，专门用来实现动态组件的渲染
通过 Vue 的 <component> 元素加一个特殊的is特性来实现不同组件之间动态切换

keep-alive

默认情况下，切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的<keep-alive>组件保持动态组件的状态

<template>
  <div>
    <button @click="name = 'first'">按钮1</button>
    <button @click="name = 'second'">按钮2</button>
    <button @click="name = 'third'">按钮3</button>

    <keep-alive>
     	<component :is="name"> </component>
    </keep-alive>
  </div>
</template>

<script>
import first from "./first";
import second from "./second";
import third from "./third";
export default {
  data() {
    return {
      name: "first",
    };
  },
  components: {
    first,
    second,
    third,
  },
};
</script>

<style>
</style>

说明：

component相当于一个组件的展示容器，所展示的组件会在 name 改变时改变
name的值可以是引入组件后注册时自定义的名称