Vue.jsには、データを定義するdataオプション、メソッドを定義するmethodsオプション、算出プロパティを定義するcomputedオプションなど、様々なオプションが用意されています。
コンポーネント（Vueインスタンス）に定義するオプションは、あらかじめ用意されているオプションとは別に、独自に定義するカスタムオプションを使用することもできます。
ここでは、独自に定義するカスタムオプションと、カスタムオプションを参照する$optionsオブジェクトについて紹介します。
カスタムオプションの定義
カスタムオプションはVueインスタンスのプロパティオプションとして定義します。
|
1 2 3 |
Vue.createApp({ sample: 'abc' }).mount('#app') |
上記の例では、「sample」という名前のオプションとして「abc」という文字列を定義しています。
定義したオプションを参照する$optionsオブジェクト
独自に定義したカスタムオプションは、$optionsオブジェクトを経由して参照することができます。
コードから参照する場合
コードから参照する場合はthis修飾子を付けて$optionsオブジェクトにアクセスします。
|
1 |
const value = this.$options.sample; |
上記のコードでは、Vueインスタンスに定義「sample」という名前のオプションを参照しています。
HTMLから参照する場合
上記のsampleオプションをHTMLテンプレートで参照する場合は、以下のようになります。
|
1 2 3 |
<div> {{$optins.sample}} </div> |
カスタムオプションの実装例
以下のカスタムオプションの実装例を示します。
ここではカスタムオプションとして「samples」という名前で文字列の配列を定義して参照します。
HTML
|
1 2 3 4 5 |
<div id="app"> <p> {{$options.samples}} </p> </div> |
JavaScript
|
1 2 3 |
Vue.createApp({ samples: ['abc', 'opq', 'xyz'] }).mount('#app') |
上記のコードをブラウザで実行（ページを表示）すると
[ “abc”, “opq”, “xyz” ]
という値が表示されます。
リンク
