Vue组件和插件

两者的区别

• 组件注册通过“Vue.component”或“components”属性，而插件通过“Vue.use()”；
• 组件是用来构成App的业务模块，它的目标是“App.vue”，而插件是用来增强技术栈的功能模块，它的目标是Vue本身

组件

• 创建一个组件.vue文件
• 在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>

插件

• 插件（Plugins）是一种能为Vue添加全局功能的工具代码。
• 创建一个插件

<template>
<div class="toast" v-if="msg">
  {{ msg }}
</div>
</template>
<script>
export default {
data() {
  return {
    msg: "",
  };
},
methods: {
  show(str = "加载中...") {
    this.msg = str;
    setTimeout(() => this.hide(), 2000);
  },
  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, 0.4);
z-index: 100000;
}
<style>

• 插件是一个对象，必须实现install办法
• 插件需要在vue文件中使用Vue.use(插件)
  • 插件方法 Vue.extent(.vue)继承.vue文件的构造函数
  • install.$mount(dom)手动挂载
  • instance.$el实例的真实dom
  • Vue.protoytpe.$toast=Toast 将插件挂载到全局（所有的组件都将拥有插件的方法和属性）

index.js
import ToastVue from './ToastCom.vue'
var Toast = {}
Toast.install = function (Vue) {
   var ToastCom = Vue.extend(ToastVue);
   var instance = new ToastCom();
   instance.$mount(document.createElement("div"));
   document.body.appendChild(instance.$el);

   Toast.show = instance.show;
   Toast.hide = instance.hide;
   Vue.prototype.$toast = Toast;
}
export default Toast



main.js
import Toast from '.ugin/Toast/index.js'
import Notify from '.ugin/Notify/index.js'
Vue.use(Toast)
Vue.use(Notify)