VUE3-模板引用

模板引用的用途

就是为了获取DOM元素操作DOM

获取实例

获取单个DOM元素

说明

只能通过声明变量的方式获取组件ref

注意点

变量名称必须与ref设置的名称一致
通过[变量名].value获取DOM元素
必须在DOM渲染完成后获取DOM元素，否则就是null

EG


<template>
    <div ref="childrenCom" @click="getDom">实例dom</div>
</template>
  
<script setup>
  import { ref } from "vue";

  // 组件实例
  let childrenCom = ref(null)

  const getDom = () => {
    console.log('组件实例', childrenCom.value)
  }

</script>
  
<style>
  
</style>

获取循环的DOM元素

对应的ref包含的值为一个数组，将在元素被挂载后包含对应整个列表的所有元素 ref 数组并不保证与源数组相同的顺序


<template>
   <div ref='getDivDom' v-for="item in list" :data-id="item.id"></div> 
</template>
<script setup>
import { ref} from 'vue'
const divDomList = ref([]);
 
const getDivDom = el=>{
    if(el){
        divDomList.set(el.dataset['id'],el) 
    }
}
 
// const el =divDomList.get(id) // 根据list数据中的id值 获取对应的dom元素 
</script>

函数模板引用

指的是ref值为一个函数，函数默认第一个参数为元素引用


<input :ref="(el) => { /* 将 el 赋值给一个数据属性或 ref 变量 */ }">

获取组件实例的DOM元素


<template>
   <swiper @swiper='getSwiper'></swiper > 
</template>
<script setup>
import swiper from 'swiper'
import { ref} from 'vue'
const swiperDom= ref(null);
 
const getSwiper= el=>{
    swiperDom.value = el;
}
</script>

调用子组件方法

说明

使用<script lang='ts' setup></script>的组件其内部的属性或方法默认是私有的，父组件无法访问其中的任何东西，必须由子组件通过defineExpose宏暴露出来

EG

1、父组件


<template>
  <div>
    <h1>父组件</h1>
    <com-two @click="getComTwo" ref="comtwo"></com-two>
  </div>
</template>

<script setup>
import ComTwo from '@/components/ComTwo.vue'
import { ref } from '@vue/reactivity'
const comtwo = ref(null)
const getComTwo = ()=>{
  console.log('子组件实例', comtwo.value)
  comtwo.value.getMsg()
}
</script>

<style scoped>

</style>

2、子组件

必须将需要提供的方法属性通过defineExpose暴露出去，父组件才可以访问


<template>
  <div>
    <h4>我是子组件</h4>
  </div>
</template>

<script setup>
  import {defineExpose} from 'vue'
  const getMsg = ()=>{
    console.log('我是子组件的事件，我被触发了')
  }

  defineExpose ({
    getMsg
  })
</script>

<style scoped>

</style>

为组件模板引用标注类型

说明

为了配合ts使用，常常需要标注对应的组件实例的类型

实现

在单文件组件中标注类型

通过typeof得到子组件的类型，再通过ts内置工具类型InstanceType获取其实例类型

vue
<template>
  <div>
    <h1>父组件</h1>
    <com-two @click="getComTwo" ref="comtwo"></com-two>
  </div>
</template>

<script lang='ts' setup>
import ComTwo from '@/components/ComTwo.vue'
import { ref } from '@vue/reactivity'
const comtwo = ref<InstanceType <typeof ComTwo> | null>(null)
const getComTwo = ()=>{
  console.log('子组件实例', comtwo.value)
  comtwo.value.getMsg()
}
</script>

<style scoped>

</style>

如果组件的具体类型无法获得，或者你并不关心组件的具体类型，那么可以使用 ComponentPublicInstance。这只会包含所有组件都共享的属性，比如 $el

参考

ts
import { ref } from 'vue'
import type { ComponentPublicInstance } from 'vue'
const child = ref<ComponentPublicInstance | null>(null)

目录