Vue3第十天，标签的 ref 属性

作用和区别

作用：用于注册模板引用。

• 用在普通DOM标签上，获取的是DOM节点。
• 用在组件标签上，获取的是组件实例对象。

我们先来看一下用在普通DOM标签，如下示例：

<template>
  <div class="person">
    <h1 ref="title1">后端</h1>
    <h2 ref="title2">前端</h2>
    <h3 ref="title3">Vue</h3>
    <input type="text" ref="inpt"> <br><br>
    <button @click="showLog">点我打印内容</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {ref} from 'vue'
	
  let title1 = ref()
  let title2 = ref()
  let title3 = ref()

  function showLog(){
    // 通过id获取元素
    const t1 = document.getElementById('title1')
    // 打印内容
    console.log((t1 as HTMLElement).innerText)
    console.log((<HTMLElement>t1).innerText)
    console.log(t1?.innerText)
    
		/************************************/
		
    // 通过ref获取元素
    console.log(title1.value)
    console.log(title2.value)
    console.log(title3.value)
  }
</script>

上面我们运行之后发现，通过ref()定义的标签放在普通DOM节点上是可以获取到的，只需要我们定义一个ref然后将ref绑定到普通DOM元素，并且给变量名绑定上去就可以了。接下来我们来看假如将ref绑定到组件上。会不会获取到组件的值呢？

<!-- 父组件App.vue -->
<template>
  <Person ref="ren"/>
  <button @click="test">测试</button>
</template>

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

  let ren = ref()

  function test(){
    console.log(ren.value.name)
    console.log(ren.value.age)
  }
</script>


<!-- 子组件Person.vue中要使用defineExpose暴露内容 -->
<script lang="ts" setup name="Person">
  import {ref,defineExpose} from 'vue'
	// 数据
  let name = ref('张三')
  let age = ref(18)
  /****************************/
  /****************************/
  // 使用defineExpose将组件中的数据交给外部
  defineExpose({name,age})
</script>

默认是不会的，不会将子组件的数据放在ref绑定的子组件的，但是我们可以使用defineExpose来将子组件的数据抛出去，也就是说允许父组件获取。这样我们父组件就可以直接使用了。

感谢大家观看，我们下次见