Vue模板引用

Vue的模板引用是为了处理直接访问DOM底层而做的补充处理，毕竟Vue宣称是基于组件的，这种补充处理是对Vue框架的补充。在前端基于BOM+DOM+js的组成来看，Vue保留模板引用是留下了一种框架设计的余裕。

模板引用案例如下：

<script setup lang="ts">
import {ref} from "vue"

   const name=ref("");
   const dom=ref(null);

   //模板引用的获取标签的属性、调用标签的事件
   function testTemplateRef(){
      if(null!=dom.value){
         let input:HTMLElement=dom.value;
         console.log(input);
         console.log(dom.value["value"]);
         console.log(input["id"]);        
         input.focus();
      }    
   }
</script>

<template>
<form>
   <div>
      <div>
          姓名:
          <input v-model.lazy="name" id="name" placeholder="input your name" ref="dom"/>
      </div>
      <div>
            <button type="button" @click="testTemplateRef">测试模板引用</button>
      </div>
   </div>    
</form>
</template>

<style>

</style>

模板引用需要在对应的HTML标签上添加 “ref”属性，属性值在组件中需要有对应，这样就可以在组件中使用属性值对模板引用进行操作。由于模板引用在组件中的属性值初始化时为null，在使用时必须先检查模板引用是否已经初始化。初始化完成后，可以根据javascript中对象属性的形式获取对应标签的属性内容，如“obj["id"]”、“obj["value"]”等。当需要对模板引用进行事件操作，如获取焦点、点击等，这需要将模板引用的对象转型为HTMLElement，然后可以调用对应的事件，如focus、click等。

模板引用ref的标签可以是通过条件渲染、列表渲染生成的。ref对应的属性值也可以是函数生成的。这些都不影响ref的正常使用。

Vue模板引用

悦读