La diferencia entre vue3 y vue2 para obtener elementos: vue2 obtiene el nodo dom a través de this.$refs api, vue3 usa directamente los datos de respuesta ref del mismo nombre para obtener;
1. Uso regular
Nota: ref="input" en el nodo debe corresponder a const input = ref(null) para obtener este nodo dom
<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. Obtener ref en v-for
A veces necesitamos obtener el nodo dom en el bucle y realizar algunas operaciones de acuerdo con el estado,
el siguiente caso es: después de recorrer la lista, obtener el nodo dom en bucle y cambiar el color de fuente de Zhongli al color azul:
<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>
El resultado es el siguiente:
3. En el componente, use 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>
Si un componente secundario usa la API opcional o no
<script setup>, significa que el componente principal tiene acceso completo a todas las propiedades y métodos del componente secundario;
Los componentes que utilizan <script setup>son privados de forma predeterminada: un componente principal no puede acceder a <script setup>nada en un componente secundario que utiliza a menos que el componente secundario se exponga explícitamente a través de la macro defineExpose: de la siguiente manera:
<script setup>
import {
ref } from 'vue'
const a = 1
const b = ref(2)
defineExpose({
a,
b
})
</script>
Cuando el componente principal obtiene la instancia del componente a través de la referencia de la plantilla, el tipo de instancia obtenido es {a: número, b: número} (la referencia se desenvolverá automáticamente, al igual que la instancia general).