ここでは、Vue.jsに用意されているインスタンスプロパティを紹介します。
インスタンスプロパティ
インスタンスプロパティとは、Vueのインスタンスが持つプロパティです。
Vueでは、定義したデータ、算出プロパティ、メソッドと名前が衝突することを避けるために、インスタンスが利用できるすべてのプロパティに対しては、接頭辞に「$」を付ける規約が設けられています。
ですので、インスタンスプロパティには、「$～」の形式でアクセスすることできます。
インスタンスプロパティには、次のものがあります。
- $data
- $props
- $el
- $options
- $parent
- $root
- $slots
- $refs
- $attrs
$data
$dataは、コンポーネントインスタンスが監視しているデータオブジェクトです。
$dataのタイプ（型）はobjectになります。
$props
$propsは、コンポーネントが受け取ったプロパティを表すオブジェクトです。
$propsのタイプ（型）はobjectになります。
$el
$elは、コンポーネントインスタンスが管理しているルートのDOM要素です。
$elのタイプ（型）はanyになります。
$options
$optionsは、現在のコンポーネントインスタンスに使用されるインスタンス化されたオプションオブジェクトです。
$optionsのタイプ（型）はobjectになります。
$parent
$parentは、現在のインスタンスに親のインスタンスがある場合は、親のインスタンスになります。
$parentのタイプ（型）はComponent instanceになります。
$root
$rootは、現在のコンポーネントツリー（階層）のルートとなるコンポーネントインスタンスです。
現在のコンポーネントインスタンスに親がない場合は、現在のコンポーネントインスタンス自体になります。
$rootのタイプ（型）はComponent instanceになります。
$slots
$slotsは、スロットによって配布されるコンテンツにプログラムでアクセスするために使用するオブジェクトです。
スロットには、それぞれに対応するプロパティがあります。（例えば、v-slot:fooのコンテンツはthis.$slots.foo()にあります。）
defaultプロパティには、名前付きスロットに含まれていないノード、またはv-slot:defaultのコンテンツになります。
$slotsのタイプ（型）は{ [name: string]: (…args: any[]) => Array
$refs
$refsは、ref属性が指定されたDOM要素とコンポーネントインスタンスのオブジェクトです。
$refsのタイプ（型）はobjectになります。
$attrs
$attrsは、コンポーネントのプロパティまたはイベントとして認識されない親スコープの属性とイベントです。
コンポーネントに定義されたプロパティまたはイベントがない場合は、基本的にすべての親スコープにバインドされたデータが含まれ、v-bind=$attrsで内部コンポーネントに渡すことができます。
$attrsのタイプ（型）はobjectになります。
