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

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

一、只在Script中创建 ref

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

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

例如:
Script 中:

typescript 复制代码
import { ref } from 'vue'

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

二、同时在TemplateScript中"创建" 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()
}

三、 TemplateScriptref 的创建与区别

  • Template 中的 ref 主要用于访问DOM节点子组件实例,通常用于操作DOM或触发子组件的方法。

  • Script中的 ref则用于创建响应式状态,主要用于数据绑定和状态管理。

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

相关推荐
eason_fan17 小时前
Git 大小写敏感性问题:一次组件重命名引发的CI构建失败
前端·javascript
无羡仙17 小时前
JavaScript 迭代器
前端
XiaoSong17 小时前
从未有过如此丝滑的React Native开发体验:EAS开发构建完全指南
前端·react.js
掘金者阿豪17 小时前
打通KingbaseES与MyBatis:一篇详尽的Java数据持久化实践指南
前端·后端
RoyLin18 小时前
TypeScript设计模式:原型模式
前端·后端·node.js
我是天龙_绍18 小时前
vue Composables 组合式函数
前端
zjjuejin18 小时前
Maven项目的核心蓝图:POM文件
前端·maven
小气小憩18 小时前
“暗战”百度搜索页:Monica悬浮球被“围剿”,一场AI Agent与传统巨头的流量攻防战
前端·人工智能
前端付豪18 小时前
1、震惊!99% 前端都没搞懂的 JavaScript 类型细节
前端·javascript·面试
朝与暮18 小时前
js符号(Symbol)
前端·javascript