Vue中以插件形式封装组件并使用

一、常规方法

在Vue项目中，通常使用封装组件的方法是
1.import 导入组件
2.在 components 中注册组件
3.在模板引擎中使用组件

常规方法的弊端

但在实际开发过程中，有一些组件会在多个地方频繁使用，并且组件还有一些自己的方法，如果使用常规方法来使用这些组件，不仅要完成上面三个步骤，还需要在封装好的组件中 $emit 方法，并在使用组件的地方监听，这样使用起来十分复杂，那么有没有一种方法，可以在需要使用组件的地方用一两句简单的代码来完成对组件的使用呢？答案是有的。

二、插件形式

废话不多说，先看结果

// 注册完成组件后，在需要的地方使用 toast 组件
// 第一个参数是当前 toast 组件要展示的数据，第二个参数是展示时间
this.$toast.show('我是要使用的toast组件', 2000);

由此可以看出来，插件形式使用组件是十分便捷的，省去了导入、注册两个繁琐且重复的步骤。接下来展示具体的组件封装过程

1.为要封装的组件创建 index.js 和 Toast.Vue 两个文件

1. components/toast/index.js

// 定义一个对象并导出
const obj = {}
export default obj;

2. components/toast/Toast.Vue
   该 Vue 文件和常规方法封装组件的 Vue 文件内容一样，下面展示我当前封装 Toast 组件的代码

<template>
  <div class="toast" v-show="isShow">
    {{ message }}
  </div>
</template>
<script>
export default {
  name: "Toast",
  data() {
    return {
      message: "",
      isShow: false,
    };
  },
  methods: {
    // 用于展示 toast
    // message 为要展示的信息
    // duration 为展示时间，默认2000ms
    show(message, duration = 2000) {
      this.isShow = true;
      this.message = message;

      setTimeout(() => {
        this.isShow = false;
        this.message = "";
      }, duration);
    },
  },
};
</script>
<style scoped>
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 10px;
  z-index: 999;

  color: #fff;
  background-color: rgba(0, 0, 0, 0.65);
}
</style>

2.在项目的 main.js 文件中安装插件

以下代码省略的 main.js 文件中的其他代码

// 导入
import toast from "components/toast";
// 安装插件
Vue.use(toast);

3.回到最初创建的 index.js 文件中完成插件的创建

我们都知道使用 Vue.use(xxx) 会调用 xxx 的 install 方法，所以现在需要在 index.js 文件中完成这个方法

// components/toast/index.js
import Toast from "./Toast"

const obj = {};

obj.install = function(Vue){
// 创建组件构造器
const toastConstructor = Vue.extend(Toast);

// 根据组件构造器，用 new 的方式创建一个组件对象
const toast = new toastConstructor();

// 将创建出来的组件对象手动挂载到某一个元素上
toast.$mount(document.createElement("div"));

// toast.$el 就是我们创建的 div
document.body.appendChild(toast.$el);

Vue.protoType.$toast = toast;
}

export default obj;

以上步骤完成后，就可以在项目的任意地方用一行代码就可以使用 toast 组件，完美地省去了引入和注册的步骤

// 调用 toast 组件中的 show 方法
this.$toast.show('一行代码使用自定义 toast 组件', 2000);