Vue.js 插件开发

Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象:

MyPlugin.install = function (Vue, options) {

  Vue.myGlobalMethod = function () {  // 1. 添加全局方法或属性，如: vue-custom-element

    // 逻辑...

  }

  Vue.directive('my-directive', {  // 2. 添加全局资源：指令/过滤器/过渡等，如 vue-touch

    bind (el, binding, vnode, oldVnode) {

      // 逻辑...

    }

    ...

  })

  Vue.mixin({

    created: function () {  // 3. 通过全局 mixin方法添加一些组件选项，如: vuex

      // 逻辑...

    }

    ...

  })

  Vue.prototype.$myMethod = function (options) {  // 4. 添加实例方法，通过把它们添加到 Vue.prototype 上实现

    // 逻辑...

  }

}

 

接下来要讲到的 vue-toast 插件则是通过添加实例方法实现的。我们先来看个小例子。先新建个js文件来编写插件：toast.js

// toast.js

var Toast = {};

Toast.install = function (Vue, options) {

    Vue.prototype.$msg = 'Hello World';

}

module.exports = Toast;

 

在 main.js 中，需要导入 toast.js 并且通过全局方法 Vue.use() 来使用插件：

 

// main.js

import Vue from 'vue';

import Toast from './toast.js';

Vue.use(Toast);

然后，我们在组件中来获取该插件定义的 $msg 属性。

 

// App.vue

export default {

    mounted(){

        console.log(this.$msg);         // Hello World

    }

}

可以看到，控制台成功的打印出了 Hello World 。既然 $msg 能获取到，那么我们就可以来实现我们的 vue-toast 插件了