标签的ref属性

当我们想要获取一个标签对应的 DOM 元素的时候在 JavaScript 中，我们通过 document.getElementById() 来借助类选择器的写法获取，但是在 Vue 中，我们的 DOM 元素是挂载在同一个网页上的，这些名称难免会重复，所以需要别的方式去获取，给标签添加ref属性正好可以解决这个问题。

使用

加在Html标签

<script lang="ts" setup name="WatchEffect">import { ref } from 'vue';let myRef = ref(); function changeH1() {console.log(myRef.value);}
</script><template><div class="class"><h1 ref="myRef">标签ref</h1><br><button @click="changeH1">获取h1标签值</button></div>  
</template><style scoped>.class {background-color: #f8f9fa; /* 背景颜色 */padding: 20px; /* 内边距 */border-radius: 10px; /* 圆角 */box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影 */text-align: center; /* 文本居中 */max-width: 500px; /* 最大宽度 */margin: 0 auto; /* 水平居中 */}button {background-color: blue;color: white;border: none;padding: 10px 20px;border-radius: 5px;cursor: pointer;margin: 10px 10px 0 10px; /* 外边距 */transition: background-color 0.3s ease; /* 按钮背景颜色过渡效果 */}
</style>

只需要在对应标签里面加入 ref 属性，然后在 script 标签里面定义即可。

加在组件上

<script lang="ts" setup name="WatchEffect">import { ref } from 'vue';import Car from './Car.vue';let myRef = ref(); let car = ref();function changeH1() {console.log(myRef.value);}function getCar() {console.log(car.value);}
</script><template><div class="class"><h1 ref="myRef">标签ref</h1><br><button @click="changeH1">获取h1标签值</button><br><button @click="getCar">获取Car组件的值</button></div><Car ref="car" /></template><style scoped>.class {background-color: #f8f9fa; /* 背景颜色 */padding: 20px; /* 内边距 */border-radius: 10px; /* 圆角 */box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影 */text-align: center; /* 文本居中 */max-width: 500px; /* 最大宽度 */margin: 0 auto; /* 水平居中 */}button {background-color: blue;color: white;border: none;padding: 10px 20px;border-radius: 5px;cursor: pointer;margin: 10px 10px 0 10px; /* 外边距 */transition: background-color 0.3s ease; /* 按钮背景颜色过渡效果 */}
</style>

<script lang="ts" setup name="Car">import { ref, defineExpose } from 'vue'let brand = ref("奔驰")let price = ref(30)function changePrice() {price.value += 10}  function changeBrand() {brand.value = "宝马"}// 向外暴露brand和pricedefineExpose({ brand, price })
</script><template><div class="class"><h2>品牌：{{ brand }}</h2><h2>价格：{{ price }}万</h2><button @click="changePrice">点击价格+10</button><br/><button @click="changeBrand">修改品牌</button></div>
</template><style scoped>.class {display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100%; /* 使内容占满整个高度 */color: rgb(214, 12, 12);font-size: 20px;}button {background-color: blue;color: white;border: none;padding: 10px 20px;border-radius: 5px;cursor: pointer;margin-top: 10px;}
</style>