vue3中HTML标签元素使用ref的作用

首先我们需要两个界面

APP.vue主界面

html 复制代码
<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",并且打印标签元素

java 复制代码
<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时,可能就会被掩盖调。

主界面:

html 复制代码
<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>

子界面:

html 复制代码
<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:

html 复制代码
<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属性观察获取到数据类型:

html 复制代码
<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

html 复制代码
<script setup  name="refTest"">

import { defineExpose } from 'vue';

e({a,b,c})

</script>

继续访问:

相关推荐
sunbyte1 小时前
Tailwind CSS 初学者入门指南:项目集成,主要变更内容!
前端·css
可爱的秋秋啊2 小时前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
一夜枫林2 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
良艺呐^O^2 小时前
uniapp实现app自动更新
开发语言·javascript·uni-app
IT瘾君4 小时前
JavaWeb:Html&Css
前端·html
264玫瑰资源库4 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端5 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED5 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪5 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程5 小时前
如何测试短信接口
java·服务器·前端