# テンプレート参照
この節ではコード例で 単一ファイルコンポーネントの文法を使用しています。
このガイドはすでに コンポジション API 導入 を読んでいることを前提に書かれています。もしまだ読んでいないのなら、先に読みましょう。
コンポジション API を使うとき、 リアクティブ参照 と テンプレート参照 のコンセプトは同じになります。 テンプレート内の要素やコンポーネントインスタンスの参照を取得するために、 ref 変数を定義して setup() で返します。
<template>
<div ref="root">This is a root element</div>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
setup() {
const root = ref(null)
onMounted(() => {
// DOM 要素は初期描画の後に ref に代入されます
console.log(root.value) // <div>This is a root element</div>
})
return {
root
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
描画コンテキストに root 変数を渡していて、ref="root" 経由で div 要素と束縛します。 仮想 DOM のパッチアルゴリズムの中で、 もし VNode の ref キーは描画コンテキストの ref に対応すると、VNode の対応する要素またはコンポーネントインスタンスに ref の値が割り当てられます。これは仮想 DOM のマウント/パッチ処理中に実行されるので、テンプレート refs では初期描画に値だけを取得できます。
テンプレート参照は他の参照と似た挙動をします。つまり、リアクティブかつコンポジション関数に渡せる(または返せる)ことができます。
# Usage with JSX
export default {
setup() {
const root = ref(null)
return () =>
h('div', {
ref: root
})
// JSX 記法
return () => <div ref={root} />
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# Usage inside v-for
コンポジション API のテンプレート参照を v-for 内部で使う時には特別な処理はされないです。代わりに、参照を提供する関数を使って独自処理を実行してください。
<template>
<div v-for="(item, i) in list" :ref="el => { if (el) divs[i] = el }">
{{ item }}
</div>
</template>
<script>
import { ref, reactive, onBeforeUpdate } from 'vue'
export default {
setup() {
const list = reactive([1, 2, 3])
const divs = ref([])
// 忘れずにアップデート前に ref をリセットしてください
onBeforeUpdate(() => {
divs.value = []
})
return {
list,
divs
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26