vue组件+vue插件的创建和使用

一、vue组件的概念

是一个可以重复使用的Vue实例，它拥有独一无二的组件名称，它可以扩展HTML元素，以组件名称的方式作为自定义的HTML标签。因为组件是可复用的Vue实例，所以它们与new Vue（）接收相同的选项，例如data，computed、watch、methods以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。

vue组件的创建

1.首先我们在component文件下以大驼峰的命名规则创建一个.vue文件，在文件中建立要复用的组件
2.组件的基本模板样式有三个标签组成`

<template></template>
<script></script>
<style><style>

3.组件的引用
在要引入组件的文件里通过文件名的标签进行引入标签引入，并在script标签导入和注册

<template>
  <div id="app">
    <router-view class="page has-tabs"></router-view>
    <TabsCom class="tabs"></TabsCom>
  </div>
</template>
<script>

import TabsCom from './components/TabsCom.vue'
export default {
  components:{TabsCom,}
}
</script>

4.注意事项：在vue文件中要严格的遵守代码规范，不然就会报错

二 原生vue插件的封装和调用

介绍：vue插件和vue组件类，但它的功能更加强大，有需要就可以调用，虽然封装的过程比较繁琐，但却是好用，在工作过程中我们会调用很多的插件

vue插件的创建

1。在src 中新建一个toast 文件夹，然后在toast文件下创建一个vue文件和index.js，在vue文件中写插件的具体功能，然后在index.js文件中进行导入和实例化，并必须实现插件的install方法，然后创建组件的实例，并挂载到真是的dom中，并添加到body中，最后一布是关联插件的方法
ToastCom.vue文件

<template>
  <div class="toast" v-if="msg">
    {{ msg }}
  </div>
</template>
<script>
//当msg为空的时候，提示隐藏，有文字的时候显示
export default {
  data() {
    return {
      msg: "",
    };
  },
  methods: {
    show(str="加载中....",delay=2000) {
      console.log(delay)
      this.msg = str;
      setTimeout(() => this.hide(), delay);
    },
    hide() {
      this.msg = "";
    }
  }
};
</script>
<style scoped >
.toast {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  padding: 15px;
  border: #fff;
  /* background-color: #fff; */
  border-radius: 4px;
  background-color: rgba(0,0,0,.4);
  z-index: 10000;
}
</style>

index.js文件

/*组件的使用方法
1.导入组件
2.获取组件的构造函数
3.创建组件的实例
4.挂载到真实的dom中,插入body
5.关联Toast
*/ 

//1.导入组件
import ToastVue from "./ToastCom.vue"
var Toast ={}
//vue的插件必须实现install方法
Toast.install = function(Vue){
   // 2.获取组件的构造函数
   var  ToastCom = Vue.extend(ToastVue);
//    3.创建组件的实例
var instance = new ToastCom();
//4.挂载到真实的dom中，插入到body
instance.$mount(document.createElement("div"));
document.body.appendChild(instance.$el);
//5.关联Toast
Toast.show = instance.show;
Toast.hide =instance.hide;


    //把当前的对象挂载得到vue的原型上，vue所有的组件和实例都可以使用$toast方法
    Vue.prototype.$toast=Toast;
}
export default Toast;

2.在mian.js文件中导入并使用插件，这样在全局中就可以使用

3.在需要的文件中进行导入，通过this.$插件名.方法名，如下在登陆页面调用
总结，作为一个新手要重点的理解组件和插件的创建过程，和使用过程的具体步骤