The difference between vue3 and vue2 to obtain elements: vue2 obtains the dom node through this.$refs api; vue3 directly uses the ref response data of the same name to obtain;
1. Regular use
Note: ref="input" on the node needs to correspond to const input = ref(null) to get this dom node
<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. Obtaining ref in v-for
Sometimes we need to obtain the dom node in the loop and perform some operations according to the state;
the following case is: after looping the list, get the looped dom node and change the font color of Zhongli to blue color:
<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>
The result is as follows:
3. On the component, 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>
If a child component is using the optional API or not
<script setup>, it means that the parent component has full access to every property and method of the child component;
Components that use <script setup>are private by default: a parent component cannot access <script setup>anything in a child component that uses unless the child component is explicitly exposed through the defineExpose macro: as follows:
<script setup>
import {
ref } from 'vue'
const a = 1
const b = ref(2)
defineExpose({
a,
b
})
</script>
When the parent component obtains the instance of the component through the template reference, the obtained instance type is { a: number, b: number } (ref will be automatically unwrapped, the same as the general instance).