LoginSignup
11
10

More than 5 years have passed since last update.

Vue.js のプラグインを書く時の、prototype 「あり」と「なし」の違い

Posted at

Vue プラグインのいくつかの書き方について整理しています。
この記事ではメソッドの影響範囲についてのみ言及します。

Vue プラグインを書く時には install メソッドを公開し、その中で、グローバル・アセットを追加したり、グローバル・ミックスインによりコンポーネントオプションを追加したりもできますが、その点については触れません。

インスタンスメソッド

prototype を使う場合のメソッドを、インスタンスメソッドと言います。

import Vue from "vue";

Vue.prototype.$myMethod = () => {
  console.log("$myMethod");
};

/* eslint-disable no-new */
const vm = new Vue();

vm.$myMethod(); // "$myMethod"
Vue.$myMethod(); // Error

インスタンスメソッドは、プロトタイプチェーンされるので、子コンポーネント内で this.$myMethod() を使用できます。Vue インスタンスの作成前(beforeCreate)でも使用できます。

また、全てのインスタンスが利用できるプロパティは $ で始まるように書くのが推奨されています。詳しくはこちら Vue Cookbook の Adding Instance Properties を参照してください。

Vueグローバルメソッド

prototype を使わない次のようなメソッドを、グローバルメソッドと言います。

Vue.myGlobalMethod = () => {
  console.log('myGlobalMethod')
}

Vue は new キーワードを使って Vue インスタンスを生成します。生成された Vue インスタンスでは、グローバルメソッドを使うことができません。もちろん、Vue が提供してくれるグローバルメソッドも同様です。

import Vue from "vue";

Vue.aaa = "aaa";

/* eslint-disable no-new */
const vm = new Vue();

console.log(Vue.aaa); // "aaa" 
console.log(vm.aaa); // undefined
console.log(Vue.version); // 2.5.21
console.log(vm.version); // undefined

グローバルメソッドを書く際には、既存のVueグローバルメソッドと衝突しないように注意です。また、グローバルメソッドは、静的メソッド(スタティックメソッド)とも言われるようです。

まとめ

独自プラグインを作成する時に、インスタンスメソッドと、グローバルメソッドの違いを理解した上で install を書かないと、うまく動かないので注意が必要です。

参照

11
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
10