在Vue 3中,ref 是一个非常重要的概念,它用于在 Template 和 Script 中引用组件实例、DOM元素或者响应式状态。
一、只在Script中创建 ref
在脚本中,ref 被用来创建响应式引用类型。
可以使用 ref 来声明一个响应式的引用变量。这个引用变量会自动跟踪依赖,并在数据变化时触发更新。
例如:
Script 中:
typescript
import { ref } from 'vue'
const drawer = ref(0)
const show_drawer=()=>{
console.log(drawer.value)
}
二、同时在Template与Script中"创建" ref
在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()
}
三、 Template 与 Script中 ref 的创建与区别
-
Template中的ref主要用于访问DOM节点或子组件实例,通常用于操作DOM或触发子组件的方法。 -
Script中的ref则用于创建响应式状态,主要用于数据绑定和状态管理。