Vue の拡張

ミックスインによる拡張

ミックスイン (mixin) は、Vue のコンポーネントに再利用可能で柔軟性のある機能を持たせるための方法です。ミックスインは、通常の Vue コンポーネントのオプションと同じように記述できます。

1
2
3
4
5
6
7
8
9
10
11
// mixin.js
module.exports = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
1
2
3
4
5
6
// test.js
var myMixin = require('./mixin')
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component() // -> "hello from mixin!"

プラグインによる拡張

プラグインは、通常 Vue のグローバルメソッドの機能を追加します。

プラグインの記述

  1. 1つ、または複数のグローバル・メソッドを追加します(例:vue-element)。
  2. 1つ、または複数のグローバル・アセットを追加します:ディレクティブ/フィルタ/トランジションなど(例:vue-touch)。
  3. Vue インスタンスメソッドを Vue.prototype に記述します。慣例として、Vue インスタンスメソッドは、$ をつけることで、他のデータやメソッドと干渉を避けることができます。
1
2
3
4
5
exports.install = function (Vue, options) {
Vue.myGlobalMethod = ... // 1
Vue.directive('my-directive', {}) // 2
Vue.prototype.$myMethod = ... // 3
}

プラグインの使用

CommonJS ベースのビルドを行っていると仮定します。

1
2
3
var vueTouch = require('vue-touch')
// プラグインをグローバルで使用
Vue.use(vueTouch)

プラグインには、オプションを追加することができます。

1
2
3
Vue.use(require('my-plugin'), {
/* 追加オプションを渡します */
})

現在提供済みのプラグインとツール

次: コツ & ベストプラクティス