vue知识点9-标签上的ref

小大宇2026-10-26 11:21

ref可以绑定DOM元素，模板标签上写ref="tempH2"，script里要定义同名的ref变量 let tempH2 = ref()
组件挂载完成之后，tempH2.value才能拿到对应的DOM元素，挂载前是undefined
通过ref变量.value可以获取DOM节点，用来操作原生DOM 案例：console.log(tempH2.value)
区分：ref存普通数据是响应式数据；模板ref用来获取DOM/组件实例，不是用来做数据响应
style加scoped，样式只在当前组件生效

javascript 复制代码

<template>
  <div class="person">
    <h2>ref用在组件或者HTML上</h2>
    <h2 ref="tempH2">水温:{{ temp }}°C</h2>
    <button @click="showTemp">显示温度</button>
  </div>
</template>


<script lang="ts">
//导出组件名称，叫做"Person"
export default {
  name: "Person"
}
</script>

<script lang="ts" setup>
import {reactive, ref, watch, watchEffect} from "vue"

let temp = ref(10);
let tempH2 = ref()

function showTemp() {
  //<h2 data-v-4cadc14e="">水温:10°C</h2>  data-v-4cadc14e=""是样式
  console.log(tempH2.value)
}
</script>

<style scoped>
.person {
  background-color: green;
}
</style>