什么是Vue组件

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

组件的作用

1.组件是vue的一个重要的特点
2.实现多人协作开发
3.通过组件划分降低开发的难度
4.实现复用，降低重复劳动

如何定义组件

1.定义
注意:template有且只有一个根节点
const steper ={
 template: '<span></span>'
}
2.在父组件中注册
 components:{steper:stepter}
3.在组件的模板中使用<steper></steper>

如何创建Vue组件

第一步在：components文件下面创建一个vue文件（TabsCom.vue）

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

import TabsCom from '@/components/TabsCom.vue'

第三步使用组件

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

什么是Vue插件

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

Vue插件的创建

第一步：创建一个组件文件（例：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插件

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

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

Vue.prototype.$toast = Toast;

10、在最外层导出插件

export default Toast;

使用

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

如何创建Vue组件和Vue插件你学会了吗？