标签的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和price
    defineExpose({ 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>