Vue3学习之旅-Vue3组件化开发(三)-动态/异步组件-vue3生命周期-组件的v-model

vue3笔记
vue3学习之旅–邂逅vue3-了解认识Vue3
vue3学习之旅–邂逅vue3-了解认识Vue3(二)
Vue3学习之旅–爱上Vue3–Vue3基础语法(一)–以及vscode基本使用和快速生成代码片段
Vue3学习之旅–爱上Vue3–Vue3的Options-API
vue3学习之旅–vue的表单和开发模式–组件化开发初识
Vue3学习之旅–初识webpack–webpack打包js，css，less等文件以及兼容性处理
Vue3学习之旅–之webpack基础-进阶–webpack5?拿来吧你！
vue3学习之旅–webpack5-babel整合sfc单文件vue组件
Vue3学习之旅-webpack终章–热部署(更新)–跨域代理？拿来吧你！
vue3学习之旅-Vue-CLI及其原理&尤大大新宠Vite-下一代前端开发构建工具Vite:拿来吧你!
Vue3学习之旅-之vue3组件化(一)—＞父子组件通信
Vue3学习之旅–Vue3组件化开发(二)-非父子组件通信及组件插槽–细节太多建议反复观看

Vue3组件化开发(三)-动态/异步组件-vue3生命周期

切换组件案例

比如我们现在想要实现了一个功能：

点击一个tab-bar，切换不同的组件显示；

这个案例我们可以通过两种不同的实现思路来实现：

1. 方式一：通过v-if来判断，显示不同的组件；
2. 方式二：动态组件的方式；
3. 方式三：路由实现（日后学到再说）

v-if实现

我们可以先通过v-if来判断显示不同的组件，这个可以使用我们之前讲过的知识来实现：

<template>
  <div>
    <button
      :key="item"
      v-for="item in tabs"
      :class="{ active: currentTab === item }"
      @click="toggle(item)"
    >{
  
  { item }}</button>

    <template v-if="currentTab === 'home'">
      <home></home>
    </template>
    <template v-if="currentTab === 'about'">
      <about></about>
    </template>
    <template v-if="currentTab === 'category'">
      <category></category>
    </template>
  </div>
</template>

<script>
import About from './page/About.vue';
import Category from './page/Category.vue';
import Home from './page/Home.vue';
export default {
  components: {
    Home, About, Category
  },
  data() {
    return {
      tabs: ['home', 'about', 'category'],
      currentTab: 'home'
    }
  },
  methods: {
    toggle(item) {
      this.currentTab = item;
    }
  },
}
</script>

<style scoped>
.active {
  background-color: #aca;
  color: aqua;
}
button {
  font-size: 20px;
}
</style>

效果

动态组件实现

动态组件是使用 component 组件，通过一个特殊的attribute is 来实现：

component： Vue的内置组件，根据属性is的值，来决定那个组件被选渲染。is 的值是一个字符串，它既可以是 HTML 标签名称也可以是组件名称。如果你传递组件本身到 is 而不是其名字，则不需要注册。

这个currentTab的值需要是什么内容呢？

1. 可以是通过component函数注册的组件；
2. 在一个组件对象的components对象中注册的组件；

动态组件<