カスタムオプションを定義して参照する $options [Vue.js]

Vue.js The Progressive JavaScript Framework

Vue.jsには、データを定義するdataオプション、メソッドを定義するmethodsオプション、算出プロパティを定義するcomputedオプションなど、様々なオプションが用意されています。

コンポーネント(Vueインスタンス)に定義するオプションは、あらかじめ用意されているオプションとは別に、独自に定義するカスタムオプションを使用することもできます。

ここでは、独自に定義するカスタムオプションと、カスタムオプションを参照する$optionsオブジェクトについて紹介します。

カスタムオプションの定義

カスタムオプションはVueインスタンスのプロパティオプションとして定義します。

上記の例では、「sample」という名前のオプションとして「abc」という文字列を定義しています。

定義したオプションを参照する$optionsオブジェクト

独自に定義したカスタムオプションは、$optionsオブジェクトを経由して参照することができます。

コードから参照する場合

コードから参照する場合はthis修飾子を付けて$optionsオブジェクトにアクセスします。

上記のコードでは、Vueインスタンスに定義「sample」という名前のオプションを参照しています。

HTMLから参照する場合

上記のsampleオプションをHTMLテンプレートで参照する場合は、以下のようになります。

カスタムオプションの実装例

以下のカスタムオプションの実装例を示します。
ここではカスタムオプションとして「samples」という名前で文字列の配列を定義して参照します。

HTML

JavaScript

上記のコードをブラウザで実行(ページを表示)すると

[ “abc”, “opq”, “xyz” ]

という値が表示されます。

Vue.js 入門 Tips 一覧