要素を取得するための vue3 と vue2 の違い: vue2 は this.$refs API を通じて dom ノードを取得します; vue3 は同じ名前の ref 応答データを直接使用して取得します。
1. 通常の使用
注: この dom ノードを取得するには、ノードの ref="input" が const input = ref(null) に対応する必要があります。
<script setup>
import {
reactive, ref, createApp, onMounted } from "vue";
let state = reactive({
text: "信息按钮" });
// 同名的 input来进行获取节点
const input = ref(null);
onMounted(() => {
if (input.value) {
input.value.focus();
}
});
</script>
<template>
<div class="ref">
<h3>ref使用：</h3>
<input type="text" ref="input" /> // ref="input" 需要和 const input = ref(null); 相对应
</div>
</template>
<style scoped></style>
2. v-for での ref の取得
ループ内で dom ノードを取得し、状態に応じていくつかの操作を実行する必要がある場合があります;
次の場合は、リストをループした後、ループされた dom ノードを取得し、Zhongli のフォントの色を変更します。青色に:
<script setup>
import {
reactive, ref, createApp, onMounted } from "vue";
const refList = ref([]); // 存放dom节点的数组的 获取到的dom节点都在这里
const list = ref([{
name: "钟离" }, {
name: "行秋" }, {
name: "香菱" }]); // 普通的响应式数据
onMounted(() => {
// ref列表使用
if (refList.value) {
console.log("refList:", refList.value);
// 我拿到了每个循环出来的dom节点 那么我就可以做一些操作了 比如 改变名为钟离的字体颜色
refList.value.forEach(item=>{
if(item.innerText === '钟离'){
item.style.color = "blue" //钟离的字体颜色改变成功
}
})
}
});
</script>
<template>
<div class="ref">
<h4>ref列表循环</h4>
<ul>
<li v-for="({ name }, index) in list" ref="refList" :key="index">
{
{
name }}
</li>
</ul>
</div>
</template>
<style scoped></style>
結果は次のとおりです。
3. コンポーネントで ref を使用します。
<script setup>
import {
ref, onMounted } from 'vue'
import Child from './Child.vue'
const child = ref(null)
onMounted(() => {
// child.value 是 <Child /> 组件的实例
})
</script>
<template>
<Child ref="child" />
</template>
子コンポーネントがオプションの API を使用しているかどうかは
<script setup>、親コンポーネントが子コンポーネントのすべてのプロパティとメソッドに完全にアクセスできることを意味します。
使用するコンポーネントは、デフォルトではプライベートです。次のように、子コンポーネントがdefineExposeマクロを通じて明示的に公開されない限り、<script setup>親コンポーネントは、 を使用する子コンポーネント内の何にもアクセスできません。<script setup>
<script setup>
import {
ref } from 'vue'
const a = 1
const b = ref(2)
defineExpose({
a,
b
})
</script>
親コンポーネントがテンプレートリファレンスを通じてコンポーネントのインスタンスを取得する場合、取得されるインスタンスの型は { a: 数値, b: 数値 } となります（ref は一般的なインスタンスと同様に自動的にアンラップされます）。