vue3中$refs的使用

一.Vue3中不同于Vue2,在Vue3的setup中我们无法访问到this的,所以我们需要借助一个方法,那就是getCurrentInstance,该方法返回了当前的实例对象,但是需要注意一下几点

• 不要把该函数当作是optionsAPI中来获取this使用
• 该方法只在setup,生命周期函数中有效,在方法中是无效的

使用ref声明一下就可以正常使用了

二.使用

<template> 
  <div> 
   <Child ref="popupCoupon">
   </Child> 
   <button @click="detailClick">Show Child Message</button>
  </div> 
 </template>
<script setup lang="ts">
	import {
		ref,
		onMounted
	} from 'vue'
	
	const popupCoupon = ref(null)  // 这样就可以
        // 明细
	const detailClick = () => {
		popupCoupon.value.open()
	}
</script>