Vue 模板引用

适用范围:

1. 在组件其他地方获取组件模板中的某个DOM元素或子组件实例

实例:

1. 获取dom元素:

<script setup lang="ts">
import { ref, onMounted } from 'vue'
 
const el = ref<DOM元素类型 | null>(null)//显示标注类型,默认为any
 
onMounted(() => {
  el.value?.focus()//可以直接获取到组件模板中的dom元素
})
</script>
 
<template>
  <input ref="el" />
</template>

2. 获取子组件元素:

<!-- App.vue -->
<script setup lang="ts">
import 自定义导入名字 from './MyModal.vue'
 
const 自定义引用名字 = ref<InstanceType<typeof 自定义导入名字> | null>(null)//为模板引用标注类型,ts专属
 
function openModal(){
  modal.value?.open()
}
</script>
<template>
	<自定义导入名字 ref="自定义引用名字" @click="openModal()" />
</template>

<!-- MyModal.vue -->
<script setup lang="ts">
import { ref } from 'vue'
 
const isContentShown = ref(false)
const open = () => (isContentShown.value = true)
 
defineExpose({//把方法暴露到实例中
  open
})
</script>