什么是Vue的组件

组件是Vue中非常重要的概念，是一个可以重复使用的Vue，是可以重复使用的Vue实例，它拥有独一无二的组件名称，它可以扩展HTML元素，以组件名称的方式作为自定义的HTML标签。

使用Vue组件的好处

因为组件是可复用的，在绝大多数网页中，很多时候一个项目中的多个页面，可能仅仅是页面元素设计称的一个个组件，所以当需要使用到的时候，直接引用组件即可

创建Vue组件

这里介绍相对简单的一种方式：
第一步：创建一个组件.vue文件（TabsCom.vue）

<template>
  <div class="tabs">
    <router-link class="link ahome" to="/"></router-link>
    <router-link class="link acate" to="/category"></router-link>
    <router-link class="link aball" to="/ball"></router-link>
    <router-link class="link acart" to="/cart"></router-link>
    <router-link class="link auser" to="/user"></router-link>
  </div>
</template>

第二步：在App.vue文件中导入组件

import TabsCom from "@/components/TabsCom.vue";

第三步：注册组件

export default {
  components: {
    TabsCom,
  },
};

第三步：使用组件

<template>
  <div id="app">
    <router-view class="pages has-tabs"></router-view>
    <tabs-com class="tabs"></tabs-com>//<TabsCom></TabsCom>也可以
  </div>
</template>

Vue插件的创建与使用

什么是Vue的插件

顾名思义：通俗的将vue的插件就是插入在vue内部的组件，是为项目添加全局功能的方式，插件是vue开发过程中的一些工具，在调用的时候只需要很少的代码就可以实现需要的效果，便于后期维护，提升开发效率，一般用于添加全局的方法等

Vue插件的创建

这里也介绍一种最简单的插件（Toast，类似于模态框的效果）
第一步：创建一个组件文件（例：ToastCom.vue）
第二步：创建一个js文件（例：index.js）

第三步：配置创建的ToastCom.vue文件、配置需要的方法，属性等

<template>
  <div class="toast" v-if="msg">
    {{ msg }}
  </div>
</template>

<script>
// 当文本 msg为空的时候 提示隐藏，有文本的时候显示
export default {
  data() {
    return {
      msg: "",
    }; //提示的文本
  },
  methods: {
  //控制显示
    show(str = "加载中...", delay = 2000) {
      this.msg = str;
      // 先手等待2秒隐藏
      setTimeout(() => this.hide(), delay);
    },
    //控制隐藏
    hide() {
      this.msg = "";
    },
  },
};
</script>

第四步：配置index.js
1、导入组件

import ToastVue from './ToastCom.vue'

2、定义一个插件，它是一个对象

var Toast = {}

3、Vue的插件必须实现install方法（这里特别注意，新手容易忽略）

Toast.install = function (Vue) {}

接下来在install方法内部

4、获取组件的构造函数

var ToastCom = Vue.extend(ToastVue);

5、创建组件的实例

var instance = new ToastCom();

6、通过$mount手动挂载到真实的dom

instance.$mount(document.createElement("div"));

7、渲染到body

document.body.appendChild(instance.$el);

8、关联Toast插件

//插件内部自定义的方法
Toast.show = instance.show;
Toast.hide = instance.hide;

9、把当前对象挂载到Vue的原型上，Vue所有的组件和实例都可以使用$toast方法

Vue.prototype.$toast = Toast;

10、在最外层导出插件

export default Toast;

使用

<button @click="$toast.show('XXXX')">自定义通知1</button>

到这里，你就学会了最基本的创建和使用简单的Vue插件了。