【vue3 入门到实战】7. 标签中的 ref

目录

1. ref 的作用

2. 如何使用

1. ref 的作用

用于注册模板引用

用在普通DOM标签上，获取的是DOM节点。

用在组件标签上，获取的是组件的实例对象。

2. 如何使用

代码如下

<template>
  <div class="app">
    <h2 ref="title">你好呀</h2>
    <button @click="test">测试</button>
    <Person ref="person"></Person>
  </div>
</template>

<script setup lang="ts">
import Person from './components/Person.vue'
import { ref } from 'vue';

let title = ref();
let person = ref();
function test() {
  console.log(title.value)
  console.log(person.value)
}
</script>

<style>
.app{
  background: wheat;
  padding: 20px;
}
</style>

值得一提的是，这里的获取的组件的实例对象是没有任何信息的。如果想拿到子组件中的信息，需要在子组件 Person.vue 中要使用 defineExpose 暴露内容。

代码如下

<template>
  <div class="person">
    <div class="person">
      <h1>需求：水温达到50℃，或水位达到20cm，则联系服务器</h1>
      <h2 id="demo">水温：{
  
  { temp }}</h2>
      <h2>水位：{
  
  { height }}</h2>
      <button @click="changePrice">水温+1</button>
      <button @click="changeSum">水位+10</button>
    </div>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {ref,watch,watchEffect} from 'vue'
    // 数据
    let temp = ref(0)
    let height = ref(0)
  
    // 方法
    function changePrice(){
      temp.value += 10
    }
    function changeSum(){
      height.value += 1
    }

    watchEffect(()=>{
      if(temp.value >= 50 || height.value >= 20){
        console.log('联系服务器')
      }
    })


    defineExpose({
      temp,
      height  
    })
</script>

这样控制台打印的内容包含了子组件暴露的内容。