Vue3--ref 和 $refs 的使用
ref 介绍
- ref 被用来给元素或子组件注册引用信息, 引用信息将会注册在父组件的 $refs 对象上,如果是在普通的DOM元素上使用,引用指向的就是 DOM 元素,如果是在子组件上,引用就指向组件的实例。
- $refs是一个对象,持有已注册过 ref的所有的子组件。
ref 有三种用法:
- ref 加在普通的元素上,用
this.$refs.name
获取到的是dom元素 - ref 加在子组件上,用
this.$refs.name
获取到的是组件实例,可以使用组件的所有方法 - 利用 v-for 和 ref 获取一组数组或者dom 节点
ref 需要在dom渲染完成后才会有
,在使用的时候确保dom已经渲染完成。比如在生命周期mounted(){}
钩子中调用,或者在 this.$nextTick(()=>{})
中调用。
子组件
<template> <div> <div>按钮</div> </div> </template> <script> export default { data() { return { datalist:[1,2,3,4], name:"邹邹" }; }, methods: { save(){ alert('save') console.log('save') }, test(){ alert('test') } }, }; </script>
父组件
<template> <div> <test ref='hello'/> <!-- 给子组件绑定了一个 ref='hello' 的属性,就可以通过 this.$refs.hello 获取子组件里的数据了 --> <button @click="hangleclick()">提交</button> </div> </template> <script> import Test from './test1' export default { components:{ Test }, // 声明子组件 data(){ return{ num: 1 } }, methods:{ hangleclick(){ console.log("datalist",this.$refs.hello.datalist) // 调用子组件的 datalist 数据 console.log("name",this.$refs.hello.name) // 调用子组件的 name 数据 this.$refs.hello.save() // 调用子组件的 save 函数 this.$refs.hello.test() // 调用子组件的 test 函数 } } } </script>
点击页面上的按钮,查看控制台输出,可以看到在父组件里调用了子组件的数据和方法
setup 中使用 ref 和 $refs
上面中是在 options 中使用了 ref 和 $ refs ,但在 setup 中,是没有 this 的,那如何获取子组件的数据呢?可以在元素上绑定 ref 属性
子组件
<template> <div> <div>按钮</div> </div> </template> <script setup lang="ts"> import { ref, reactive } from "vue"; // 导入 const name = ref("邹邹"); const datalist = reactive([1, 2, 3, 4]); const save = () => { alert("save"); console.log("save函数执行了"); }; const test = () => { alert("test函数执行了"); }; // 父组件使用的话需要导出 defineExpose({ name, datalist, save, test }); </script>
父组件
<template> <div> <child ref="childFormRef" /> <!-- 给子组件绑定了一个 ref='childFormRef' --> <button @click="handleclick()">提交</button> </div> </template> <script setup lang="ts"> import Child from "./child.vue"; import { ref } from "vue"; // 导入 const childFormRef: any = ref<InstanceType<typeof Child>>(); // 实例化 const num = ref(1); const handleclick = () => { console.log("name", childFormRef.value.name); console.log("datalist:", childFormRef.value.datalist); // 调用子组件的 datalist 数据 childFormRef.value.save(); // 调用子组件的 save 函数 childFormRef.value.test(); // 调用子组件的 test 函数 }; </script>
这样就实现了在 setup 中使用 ref 和 $refs 了,效果和在 options 里的一样
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~
2020-12-02 python--封装