首先我们需要两个界面
APP.vue主界面
<template><!-- html --><div class="app"><h1 ref="title">您好啊！</h1><button @click="printTitle">点我</button> <refTest/></div>
</template><script lang="ts" setup name="App">
import {ref} from "vue";
import refTest from "./components/Ref/refTest.vue";const title = ref<HTMLElement | null>(null);function printTitle() {console.log(title.value);
}</script><style scoped>
/* 样式 */
.app {box-shadow: 0 0 10px #000;background-color: rgb(88, 172, 168);border-radius: 10px;padding: 20px;
}
</style>主界面中，定义了，ref="title"，并且打印标签元素
子界面定义同名ref="title",并且打印标签元素
<template>
<div class="divBox">
<h2>中国</h2>
<h2 ref="title">北京</h2>
<h2>上高速</h2>
<button @click="printTitle">打印标题标签元素</button>
</div></template><script setup name="refTest"">
import { ref } from 'vue'//创建一个title引用,用于存储引用
const title = ref()
function printTitle(){console.log(title.value);
}
</script><style scoped>
@import "../../Css/divBox.css";
</style>此时我们，打印元素：
此时不受同名，ref="title"的影响，正解！！！
问题：
为什么会使用ref来获取元素标签呢？
测试：
当我们使用id来获取DOM元素的时候，id具有唯一标识，因此，当我们定义同名id时，可能就会被掩盖调。
主界面：
<template><!-- html --><div class="app"><h1 id="title">您好啊！</h1><button @click="printTitle">点我</button> <refTest/></div>
</template><script lang="ts" setup name="App">
import {ref} from "vue";
import refTest from "./components/Ref/refTest.vue";function printTitle() {console.log(document.getElementById("title"));
}</script><style scoped>
/* 样式 */
.app {box-shadow: 0 0 10px #000;background-color: rgb(88, 172, 168);border-radius: 10px;padding: 20px;
}
</style>子界面：
<template>
<div class="divBox">
<h2 id="title">中国</h2>
<h2>上高速</h2>
<button @click="printTitle">打印标题标签元素</button>
</div></template><script setup name="refTest"">
import { ref } from 'vue'function printTitle(){console.log(document.getElementById("title"));
}
</script><style scoped>
@import "../../Css/divBox.css";
</style>依次点击：
由于主界面的元素先渲染的，因此打印的都是相同元素！！！
其中标签后面的，data-v-7a7a37b1是指style标签中的css样式，将scope删除，便可去掉
当我们在组件中使用ref会发生什么？
首先在子组件中添加相关数据a、b、c：
<script setup name="refTest"">
import { ref } from 'vue'//添加多数据
const a = ref(0)
const b = ref(1)
const c = ref(2)//创建一个title引用,用于存储引用
const title = ref()
function printTitle(){console.log(title.value);
}
</script><style scoped>
@import "../../Css/divBox.css";
</style>父组件：
通过在组件标签上添加ref属性观察获取到数据类型：
<template><!-- html --><div class="app"><h1 ref="title">您好啊！</h1><button @click="printTitle">点我</button> <refTest ref="testRef"/></div>
</template><script lang="ts" setup name="App">
import {ref} from "vue";
import refTest from "./components/Ref/refTest.vue";const title = ref<HTMLElement | null>(null);
const testRef = ref(null);
function printTitle() {console.log(testRef.value);
}</script><style scoped>
/* 样式 */
.app {box-shadow: 0 0 10px #000;background-color: rgb(88, 172, 168);border-radius: 10px;padding: 20px;
}
</style>浏览器打印：
并不能获取到子组件的相关数据a、b、c
因为vue在框架中对数据进行了隐藏，实现数据安全！！！
当然我们可以将数据进行手动暴露出来
在子组件中引入defineExpose
<script setup name="refTest"">import { defineExpose } from 'vue';e({a,b,c})</script>
继续访问：
