<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, 可以動態(tài)顯示組件 -->
      <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, 可以動態(tài)顯示組件 -->
    <component :is="comName"></component>
</keep-alive>

<keep-alive include="name1,name2">
    <!-- vue內置的組件component, 可以動態(tài)顯示組件 -->
    <component :is="comName"></component>
</keep-alive>