Vue动态组件和keep-alive组件实例详解

    <component :is="comName"></component>

根组件
├── App.vue
└── components
    ├── UserName.vue # 用户名和密码输入框
    └── UserInfo.vue # 人生格言和自我介绍框

<template>
  <div>
    <h2>UserName</h2>
    <p>用户名:<input /> </p>
    <p>密码:<input /> </p>
  </div>
</template>

<script>
export default {

}
</script>

<template>
  <div>
    <h2>UserInfo.vue</h2>
    <p>人生格言:<input /> </p>
    <p>自我介绍:<textarea /> </p>
  </div>
</template>

<script>
export default {

}
</script>

<template>
  <div>
    <button @click="comName = 'UserName'">账号密码填写</button>
    <button @click="comName = 'UserInfo'">个人信息填写</button>

    <p>下面显示注册组件:</p>
    <div style="border: 1px solid red">
      <!-- vue内置的组件component, 可以动态显示组件 -->
      <component :is="comName"></component>
    </div>
  </div>
</template>

<script>
import UserName from "./UserName";
import UserInfo from "./UserInfo";
export default {
  data() {
    return {
      comName: "UserName",
    };
  },
  components: {
    UserName,
    UserInfo,
  },
};
</script>

<keep-alive>
    <!-- vue内置的组件component, 可以动态显示组件 -->
    <component :is="comName"></component>
</keep-alive>

<keep-alive include="name1,name2">
    <!-- vue内置的组件component, 可以动态显示组件 -->
    <component :is="comName"></component>
</keep-alive>