让多个组件使用同一个挂载点，并动态切换，这就是动态组件
 
简单的说，动态组件就是将几个组件放在一个挂载点下，这个挂载点就是标签，其需要绑定is属性，属性值为父组件中的变量，变量对应的值为要挂载的组件的组件名，然后根据父组件里某个变量来动态显示哪个，也可以都不显示，如:
 
<template>
  <div class="home">
      <component :is="currentComponent"></component>
  </div>
</template>
<script>
import Tab0 from "@/components/Tab0.vue";
import Tab1 from "@/components/Tab1.vue";
export default {
    data: () => {
        return {
            currentIndex: 0 // 通过改变currentIndex改变要挂载的组件名
        }
    },
    components: {
        "tab-0": Tab0,
        "tab-1": Tab1
    }
    currentComponent() { // 动态计算要挂载的组件的组件名
      return `tab-${this.currentIndex}`; // "tab-0" 、"tab-1"
    }
}
</script>
 
缓存<keep-alive>
 
包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中
可以将动态组件放到组件内对动态组件进行缓存，这样动态组件进行切换的时候，就不会每次都重新创建了。
 
<template>
  <div class="home">
     <keep-alive>
          <component :is="currentComponent"></component>
     </keep-alive>
  </div>
</template>

组件是Vue中的一个重要概念，是一个可以重复使用的Vue是可以复用的Vue实例，它拥有独一无二的组件名称，它可以扩展HTML元素，以组件名称的方式作为自定义的HTML标签。因为组件是可复用的Vue实例，所以它们与new Vue（）接收相同的选项，例如data，computed、watch、methods以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。
 
例如，在一个绝大多数的系统网页中，网页都包含header、menu、body、footer等部分，在很多时候，同一个系统中的多个页面，可能仅仅是页面元素设计成一个个组件，当需要使用到的时候，引用这个组件即可。
 
不过，与在编写C#是对代码进行模块化的划分不同，模块化主要是为了实现每个模块、方法的职能单一，一般是通过代码逻辑的角度进行划分；而Vue中的组件化，更多的是为了实现对于前端UI组件的重用。

Vue中内置的组件有以下几种：
1）component
2）transition
3）transition-group
4）keep-alive
5）slot


1）component组件：有两个属性---is    inline-template
渲染一个‘元组件’为动态组件，按照'is'特性的值来渲染成那个组件
2）transition组件：为组件的载入和切换提供动画效果，具有非常强的可定制性，支持16个属性和12个事件
3）transition-group：作为多个元素/组件的过渡效果
4）keep-alive：包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
5）slot：作为组件模板之中的内容分发插槽，slot元素自身将被替换




详情请看官网API：点击打开链接

 
 
      今天，bug菌为大家带来一期帝王级干货，有关于前端vue的组件教学，深入指引大家在vue中如何创建自定义的组件，并且在vue中引入你自定义的组件；
 
 
      具有很好的教学价值，希望小伙伴们根据这篇文章可以有所收获，建议小伙伴们先收藏后阅读哦。
 
 
      小伙伴们如果觉得文章不错，点赞、收藏、评论，分享走一起呀，记得给bug菌来个一键三连~~
 
 
      好了，我们开始这期的正文吧。
 
 
 
 
#1、在你的项目中专门创建一个放置自定义组件的文件夹（我是放在了components底下的common中，分类好日后方便维护，本文以table.vue为例）
 
 
#2、在你要添加的页中加入要引入的模块,注意驼峰命名的方式（本文为例：<v-table></v-table>，因为我在定义table模块的时候定义了name：v-table，所以引用的时候，也必须得用所在table模块中name定义好的名字）；
 
 
#3、在index.vue中引入table.vue模块 ；如下：
 
//index.vue 页面 ，引入v-table模块
<div class="table">
    <v-table></v-table> //这就是你引入的自定义模块；注意是驼峰命名法
</div>
 
#4、在index.vue页面引入该组件(注意：table.vue，我是在index.vue页面中添加了模块<v-table>,不是html标签，其实就是vue引入新的子组件）
 
//index.vue
<script>
  import vTable from '../../components/common/table'  //table.vue（注意，我在index.vue页面中添加了模块<v-table>,不是html标签，其实就是vue引入新的子组件）
    export default {
        name: "index",
      components: {
            vTable
        },
    }
</script>
 
ps：说白了，自定义组件就好比封装，把一些公共的模块抽取出来，然后写成单独的的工具组件或者页面，在需要的页面中就直接引入即可。
 
#5、另外，为了防止在同一页面写入过多的代码，不方便后期维护，便可以把整个页面分成多个小模块，然后在主页面进行模块引入，创建包括引入步骤都是一样的。
 
比如：
 
 
总结：
 
vue组件命名问题：
 
1、别用驼峰式命名 因为 vue   webpack编译后 ，他统一会变成小写（顾名思义：骆驼式命名法就是当变量名或函数名是由一个或多个单词连结在一起，而构成的唯一识别字时，第一个单词以小写字母开始；从第二个单词开始以后的每个单词的首字母都采用大写字母，例如：myFirstName、myLastName，这就叫驼峰命名；你们学会了吗）
 
2、组件命名最好加个前缀 比如    <v-table></v-table>或者<v_table></v_table>
 

 
 
 
❤如果文章对您有所帮助，就请在文章末尾的左下角把大拇指点亮吧！(#^.^#)；
 
 
❤如果喜欢bug菌分享的文章，就请给bug菌点个关注吧！(๑′ᴗ‵๑)づ╭❤～；
 
 
❤对文章有任何问题欢迎小伙伴们下方留言或者入群探讨【群号：708072830】；
 
 
❤鉴于个人经验有限，所有观点及技术研点，如有异议，请直接回复参与讨论(请勿发表攻击言论，谢谢）；
 
 
❤版权声明：本文为博主原创文章，转载请附上原文出处链接和本文声明，版权所有，盗版必究！(*^▽^*).