[Vue3 + TS + Vite] ref 在 Template 与 Script 下的使用

漆黑的莫莫2024-07-05 5:07

在Vue 3中，ref 是一个非常重要的概念，它用于在 Template 和 Script 中引用组件实例、DOM元素或者响应式状态。

在脚本中，ref 被用来创建响应式引用类型。

可以使用 ref 来声明一个响应式的引用变量。这个引用变量会自动跟踪依赖，并在数据变化时触发更新。

例如：
Script 中：

typescript 复制代码

import { ref } from 'vue'

const drawer = ref(0)
const show_drawer=()=>{
  console.log(drawer.value)
}

在Vue的Template中，ref 主要用于引用DOM元素或子组件实例。

当您在 Template 中为一个元素或组件添加 ref属性时，

Vue会在该组件或元素上创建一个引用，

在Script 中，可以在Script 中先定义一个同名的ref之后，直接通过这个ref来访问实例。

例如：
Template 中：

typescript 复制代码

<AddOrEditDrawer 
	ref="drawer" 
	:employeeRow="employeeRow"
	@confirmFunc="subData"
 />

Script 中：

typescript 复制代码

import { ref } from 'vue'

const drawer = ref<InstanceType<typeof Drawer> | null>(null)
const open_drawer=()=>{
  drawer.value?.isOpen()
}

参考链接
vue3+element plus封装一个Drawer抽屉组件