Vue3 ref 属性

Vue3 組み込み属性

ref属性は、要素や子コンポーネントに参照情報を登録し、JavaScript コードから DOM 要素やコンポーネントインスタンスに直接アクセスできるようにするために使用します。

基本説明

refVue において DOM 要素やコンポーネントインスタンスを取得する重要な方法です。Vue インスタンスのマウント後に、DOM を直接操作したり、子コンポーネントのメソッドを呼び出したりすることができます。

型: String | Function
役割: DOM 要素や子コンポーネントインスタンスにアクセスし、フォーカス制御やメソッド呼び出しなどの操作を行います。

基本的な使い方

1、Options API で ref を使用する

Options API では、ref で登録した参照はコンポーネントインスタンスの$refsオブジェクト内に格納されます：

例

<template>
<div>
<input type="text" ref="inputField" />
<button @click="focusInput">入力ボックスにフォーカス</button>
</div>
</template>

<script>
export default {
methods: {
focusInput() {
// $refs を介して DOM 要素にアクセス
this.$refs.inputField.focus()
}
}
}
</script>

2、Composition API で ref を使用する

Composition API では、次を使用することをお勧めしますuseTemplateRefテンプレート参照を取得するには：

例

<template>
<div>
<input type="text" ref="inputField" />
<button @click="focusInput">入力ボックスにフォーカス</button>
</div>
</template>

<script setup>
import { useTemplateRef } from 'vue'

// テンプレート内の ref 名と一致する参照を作成
const inputField = useTemplateRef('inputField')

function focusInput() {
// DOM 要素に直接アクセス
inputField.value?.focus()
}
</script>

使用シーン

1、DOM 要素にアクセスする

ref を使用すると、DOM 要素に直接アクセスして、フォーカス制御や値の取得などの操作を行うことができます：

例

<template>
<div>
<input type="text" ref="username" placeholder="ユーザー名" />
<button @click="getValue">値を取得</button>
</div>
</template>

<script>
export default {
methods: {
getValue() {
// 入力ボックスの値を取得
const value = this.$refs.username.value
console.log('入力値：', value)
}
}
}
</script>

2、子コンポーネントインスタンスにアクセスする

ref を使用すると、子コンポーネントのインスタンスにアクセスし、子コンポーネントのメソッドを呼び出したり、そのデータにアクセスしたりできます：

例

<template>
<div>
<child-component ref="childRef"></child-component>
<button @click="callChildMethod">子コンポーネントのメソッドを呼び出し</button>
</div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
components: {
ChildComponent
},
methods: {
callChildMethod() {
// 子コンポーネントのメソッドを呼び出す
this.$refs.childRef.sayHello()
// 子コンポーネントのデータにアクセス
console.log('子コンポーネントデータ：', this.$refs.childRef.message)
}
}
}
</script>

3、関数型 ref

ref は関数を受け取ることもできます。この関数は更新のたびに呼び出され、参照の保存場所を完全に制御できます：

例

<template>
<div>
<input type="text" :ref="el => inputEl = el" />
<button @click="focusInput">フォーカス</button>
</div>
</template>

<script>
export default {
data() {
return {
inputEl: null
}
},
methods: {
focusInput() {
this.inputEl?.focus()
}
}
}
</script>

注意事項

ref の登録タイミング：ref 自体はレンダリング関数の結果によって作成されるため、コンポーネントのマウント後にアクセスする必要があります。もしcreatedライフサイクルフックでアクセスすると、$refsまだ空のオブジェクトです。

非リアクティブ：$refsは非リアクティブであるため、テンプレート内でデータバインディングに使用すべきではありません。DOM 操作には JavaScript 内でのみ使用します。

ref の乱用を避ける：可能な限り、データ駆動とイベント処理を使用して DOM と子コンポーネントを操作してください。ref を過度に使用すると、コードの保守が難しくなります。

例

<script>
export default {
created() {
console.log(this.$refs.inputField) // undefined
},
mounted() {
console.log(this.$refs.inputField) // アクセスできます
}
}
</script>

v-for との併用

ref はv-forv-for にも使用でき、対応するすべての DOM 要素またはコンポーネントインスタンスを含む配列が作成されます：

例

<template>
<div>
<div v-for="(item, index) in items" :key="item.id" :ref="el => setItemRef(el, index)">
{{ item.name }}
</div>
<button @click="logRefs">すべての参照を出力</button>
</div>
</template>

<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'プロジェクト1' },
{ id: 2, name: 'プロジェクト2' },
{ id: 3, name: 'プロジェクト3' }
],
itemRefs: []
}
},
methods: {
setItemRef(el, index) {
if (el) {
this.itemRefs[index] = el
}
},
logRefs() {
console.log('すべての参照：', this.itemRefs)
}
}
}
</script>