Using Vue global methods somewhere else


Vue global methods

想在vue裡讓components或instances共用methods、data,有幾種方式:1. plugins 2.mixins,可以達到類似global methods的code reuse。

 

Using a plugin

使用plugins有幾種用法:

MyPlugin.install = function(Vue, options) {
    // 1. add global method or property
    Vue.myGlobalMethod = function() {
        // something logic ...
    }

    // 2. add a global asset
    Vue.directive('my-directive', {
        bind(el, binding, vnode, oldVnode) {
            // something logic ...
        }
        ...
    })

    // 3. inject some component options
    Vue.mixin({
        created: function() {
                // something logic ...
            }
            ...
    })

    // 4. add an instance method
    Vue.prototype.$myMethod = function(methodOptions) {
        // something logic ...
    }
}

 

可以將MyPlugin抽出,寫成額外的檔案,方便管理這些自訂的mudules(比如放進js/utils/MyPlugin.js),每個plugin都必須有一個install method。

 

Using the plugin methods somewhere else

假設已經採用了上面的第四種方式。此時有一些特殊的需求,使得我們不得不在vue以外的地方使用到plugin裡的方法(例如,jQuery),或是這個方法相依了一些vue裡面的東西,便可以透過某些髒髒的方式,來讓外界取用:

// Utils.js, the plugin
Utils.install = function(Vue) {
    // register some global plugins

    // the function we want
    Vue.prototype.$doSomething = function(data) {
        // do something
    }
}

export {Utils}

 

Add the plugin to Vue:

import {Utils} from './Utils';
Vue.use(Utils);

 

Now, you can call it wherever you want:

Vue.prototype.$doSomething(data);

// or if you bind it to window
window.Vue.prototype.$doSomething(data);