Vue组件、Vue插件创建与使用

Vue组件

作用

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

组件解释

组件就是定义好的一功能模块
建议:多用props，少在组件中使用data（降低组件的耦合性，提高复用性）

定义使用

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

如何创建Vue组件

第一步：在components中创建一个组件.vue文件（JokCom.vue）
第二步：在App.vue文件中的导入组件

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

第三步：注册组件同理还是在，App.vue文件中的

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

第四步：使用组件

<template>
  <div id="app">
    <router-view class="pages has-tabs"></router-view>
    <Jok-com class="tabs"></Jok-com>
  </div>
</template>

Vue插件

什么是Vue插件

vue.js插件是用来增强技术栈的功能模块，它的目标是Vue；插件也是对Vue的功能的增强和补充；插件通常用来为Vue添加全局功能，但是插件的功能范围没有严格的限制。

Vue插件的创建

（plugin）插件

1.插件是一个对象，必须实现install办法

2.插件需要在vue文件中使用vue.use(插件)

3.要创建一个插件文件：例如Toast文件其中要包含相应的js和vue文件（如下方的index.js和Toast.vue）

index.js

//01导入组件
import ToastVue from './ToastCom.vue'
//定义一个插件他是一个对象
var Toast = {}
//Vue的插件必须实现install方法
Toast.install = function(Vue){
    //02获取组件的构造函数
    var ToastCom = Vue.extend(ToastVue);
    //03创建组件的实例
    var instance = new ToastCom();
    //04挂在到真实的dom
    instance.$mount(document.createElement("div"));
    //05插入到body
    document.body.appendChild(instance.$el);
    //06关联Toast插件
    Toast.show = instance.show;
    Toast.hide = instance.hide;
    //把当前对象挂在到Vue的原型上
    //Vue所有的组件和实例都可以使用$toast放
    Vue.prototype.$toast = Toast;
}
//导出组件
export default Toast;

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>
<style scoped>
    .toast{
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        padding: 15px;
        border-radius: 4px;
        color: #fff;
        background-color: rgba(0,0,0.4);
        z-index: 10000;
    }
</style>

4.插件方法(注意事项)

    vue.extend(.vue文件)
    	继承.vue文件的构造函数
    手动挂载
    	instance.$mount(dom)
    实例的真实dom
    	instance.$el
    Vue.protoytpe.$toast = Toast
    	将插件挂载到全局的（所有组件的实力都将拥有插件的方法和属性)