# インスタンスプロパティ
# $data
型:
Object
詳細:
コンポーネントインスタンスが監視しているデータオブジェクトです。コンポーネントインスタンスは、この data オブジェクトのプロパティへのアクセスをプロキシします。
# $props
型:
Object
詳細:
コンポーネントが受け取った現在のプロパティを表すオブジェクトです。コンポーネントインスタンスは、この props オブジェクトのプロパティへのアクセスをプロキシします。
# $el
型:
any
読み込みのみ
詳細:
コンポーネントインスタンスが管理しているルート DOM 要素です。
Fragments を使っているコンポーネントでは、
$el
は DOM 内で Vue がコンポーネントの位置を追跡するために使う DOM ノードのプレースホルダになります。DOM 要素に直接アクセスするためには、$el
に頼る代わりに テンプレート参照 を使うことをおすすめします。
# $options
型:
Object
読み込みのみ
詳細:
現在のコンポーネントインスタンスに使われるインスタンス化オプションです。これはオプションにカスタムプロパティを含めたいときに便利です:
const app = createApp({ customOption: 'foo', created() { console.log(this.$options.customOption) // => 'foo' } })
1
2
3
4
5
6
# $parent
型:
Component instance
読み込みのみ
詳細:
現在のインスタンスに親インスタンスがある場合は、その親インスタンスです。
# $root
型:
Component instance
読み込みのみ
詳細:
現在のコンポーネントツリーのルートコンポーネントインスタンスです。現在のインスタンスが親を持たない場合、この値は自分自身になります。
# $slots
型:
{ [name: string]: (...args: any[]) => Array<VNode> | undefined }
読み込みのみ
詳細:
スロットにより配信された コンテンツにプログラム的にアクセスするために使われます。それぞれの 名前付きスロット は自身に対応するプロパティを持ちます(例えば、
v-slot:foo
のコンテンツはthis.$slots.foo()
にあります)。default
プロパティは、名前付きスロットに含まれないノードか、v-slot:default
のコンテンツを含みます。this.$slots
へのアクセスは、render function でコンポーネントを書くときにもっとも便利です。例:
<blog-post> <template v-slot:header> <h1>About Me</h1> </template> <template v-slot:default> <p> Here's some page content, which will be included in $slots.default. </p> </template> <template v-slot:footer> <p>Copyright 2020 Evan You</p> </template> </blog-post>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15const { createApp, h } = Vue const app = createApp({}) app.component('blog-post', { render() { return h('div', [ h('header', this.$slots.header()), h('main', this.$slots.default()), h('footer', this.$slots.footer()) ]) } })
1
2
3
4
5
6
7
8
9
10
11
12参照:
# $refs
型:
Object
読み込みのみ
詳細:
ref
属性 で登録された DOM 要素のオブジェクトとコンポーネントインスタンスです。参照:
# $attrs
← その他 インスタンスメソッド →