忍者ブログ
プログラマ、ララ・ベル子さんのゆるふわ奮闘記。

グローバルで使うメソッドを何とかしたい。教えて偉い人。

皆さんお気づきだろうか、今日が7月1日だということを。
どうもベル子です。

ブログの更新目標を過ぎてしまったわけだが、
内容でカバーするつもりなので、そこんとこヨロシク!!
嘘です、すみません。

ということでVue.jsでのコーディングも慣れてきたにはきたのですが、
ちょっと困っていることがあって、
コンポーネントを拡張したり、グローバルなVueインスタンスやコンポーネントに共通で使うメソッドなどを混ぜ込みたいと思うことがある。

どうすればいいか、みんなどうしてるのか。
偉い人に教えてもらいたい。
ググッてみた。
だけどあんまり偉い人に出会えなかった。
だから暇つぶしにドキュメントを見てみた。
Mixinという概念に出会う ← 今ここ

Mixinとは要するに共通で使いたいものを書いておいて、
インスタンスの中で読み込むと既存の人たちに混ぜ込んでくれるよ!
というものようだ。
何やらすごく便利そうだ。
私の求めていたもの、そうに違いない。

createdなどのフック系は上書きされず順番に実行されて、
methodsの中の関数みたいなのは、同じ名前だと上書きされていくようです。

文字書いてもなんだか分からないと思うので、
ちょっとしたサンプルを作りました。

Mixinとか継承とかで遊んでみた on jsbin.com


いろいろ遊びすぎて訳が分からなくなってますが、
1つ分かったのはMixinだろうが、extendだろうが
同名の関数は一番最後に上書きして定義したやつになる。
createdに書いたやつは全部順番に実行される。
グローバルのVueインスタンスに関数を混ぜ込みたいならMixinを使えばいい。

ということのようです。

なーるほどねー。

ということはグローバルに使う可能性のある関数はMixinにすればええんやね。
ということでいろいろ悩んでいたことは解決しました。
やっぱりドキュメントは偉大です。

拍手[0回]

PR