// 自己使用

<div v-for="item in ['lisi','wanger']" :key="item">
<test :ref="(el) => setGraphRef(el, item)" />
</div> const setGraphRef = (el, type) => {
if (el) {
itemRefs[type] = el;
}
}; // 调用
const targetRef = itemRefs[item];
if (targetRef) targetRef.testa();

// 官方的例子
<div v-for="item in list" :ref="setItemRef"></div> import { onBeforeUpdate, onUpdated } from "vue"; export default {
setup() {
let itemRefs = [];
const setItemRef = (el) => {
if (el) {
itemRefs.push(el);
}
};
onBeforeUpdate(() => {
itemRefs = [];
});
onUpdated(() => {
console.log(itemRefs);
});
return {
setItemRef,
};
},
};

vue3.0中ref动态绑定的更多相关文章

  1. vue3.0中的双向数据绑定方法

    熟悉vue的人都知道在vue2.x之前都是使用object.defineProperty来实现双向数据绑定的 而在vue3.0中这个方法被取代了 1. 为什么要替换Object.definePrope ...

  2. Vue3.0中引入地图(谷歌+高德+腾讯+百度)

    1 概述 项目需求需要引入地图,对于目前最新的Vue3.0,无论是百度/高德/腾讯地图目前还没有适配,只有Vue 2.x版本的: 目前只有谷歌地图的Vue3.0适配: 但是没有适配并不代表不能使用,本 ...

  3. Vue组件篇——Vue3.0中使用高德地图

    VUE-CLI 3.0 中配置高德地图 在项目开发中,地图组件 1.首先,需要注册高德开放平台的账号,并在[应用管理]页面[创建新应用],为应用添加Key值 高德开放平台:https://lbs.am ...

  4. vue3.0中如何使用ueditor

    1.在官网下载一个ueditor版本[https://ueditor.baidu.com/website/download.html],解压后放到public文件下的static文件中重命名为Edit ...

  5. Vue3.0工程创建 && setup、ref、reactive函数 && Vue3.0响应式实现原理

    1 # 一.创建Vue3.0工程 2 # 1.使用vue-cli创建 3 # 官方文档: https://cli.vuejs.org/zh/guide/creating-a-project.html# ...

  6. vue3.0自定义指令(drectives)

    在大多数情况下,你都可以操作数据来修改视图,或者反之.但是还是避免不了偶尔要操作原生 DOM,这时候,你就能用到自定义指令. 举个例子,你想让页面的文本框自动聚焦,在没有学习自定义指令的时候,我们可能 ...

  7. vue3系列:vue3.0自定义弹框组件V3Popup|vue3.x手机端弹框组件

    基于Vue3.0开发的轻量级手机端弹框组件V3Popup. 之前有分享一个vue2.x移动端弹框组件,今天给大家带来的是Vue3实现自定义弹框组件. V3Popup 基于vue3.x实现的移动端弹出框 ...

  8. vue3系列:vue3.0自定义虚拟滚动条V3Scroll|vue3模拟滚动条组件

    基于Vue3.0构建PC桌面端自定义美化滚动条组件V3Scroll. 前段时间有分享一个Vue3 PC网页端弹窗组件,今天带来最新开发的Vue3.0版虚拟滚动条组件. V3Scroll 使用vue3. ...

  9. vue3.0 props

    .orange { color: rgba(255, 165, 0, 1) } Vue3.0 props 1.你是否遇到了,引用props数据报错的问题? 在Vue3.0中,采用了proxy,让很多数 ...

  10. vue3.0的变化

    初涉vue3.0,下面是我在demo中遇到的一些问题(我是用的vue-cli进行开发) [1]main.js中配置  第一个变化 vue2.x ===  Vue.prototype.$baseURL= ...

随机推荐

  1. C#中的进程检测退出事件和座位状态改变事件深入浅出谈谈EventHandler的使用

    关于进程 之前我在启动我的师生对讲的exe的时候,都是直接调用Process类的静态函数Process.Start(System.String AppPath,System.String Argume ...

  2. 通过 CancellationToken 提高 Web 性能

    在 Web 开发中,经常会遇到这样的场景:用户发起一个请求,Web 服务器执行一些计算密集型的操作,等待结果返回给用户.这种情况下,如果用户在等待结果的过程中取消了请求,那么服务器端依然会继续执行计算 ...

  3. 使用WPF或AspNetCore创建简易版ChatGPT客户端,让ChatGPT成为你的私人助理

    前言:前一天写的一个ChatGPT服务端,貌似大家用起来还不是那么方便,所以我顺便用WPF和AspNetCore的webapi程序做个客户端吧,通过客户端来快速访问chatgpt模型生成对话.   1 ...

  4. DTMF2num拨号音识别

    说明 很多出题人可能会把手机或者其他设备打电话的拨号音作为一个题目技能中的考察点. 什么是DTMF? 双音多频的拨号键盘是4×4的矩阵,每一行代表一个低频,每一列代表一个高频.每按一个键就发送一个高频 ...

  5. Keepalived高可用集群部署

    KeepAlived 目录 KeepAlived KeepAlived安装 KeepAlived部署 准备工作 主备模式 节点配置 验证 正常状态 故障 故障恢复 1+N(一主多备)模式 节点配置 验 ...

  6. 如何找到CSDN中关注的用户和粉丝?

    如何找到CSDN中关注的用户和粉丝? 刚刚在CSDN个人账号里找了半天都没找到自己关注的人 对CSDN的页面更新感到很迷, 个人账号管理很不人性化, 或者说是根本找不到自己关注的用户以及关注自己的粉丝 ...

  7. 图解B树及C#实现(3)数据的删除

    目录 前言 从叶子节点删除数据 从非叶子节点删除数据 提前扩充只有 t-1 的 Item 的节点:维持 B树 平衡的核心算法 从左兄弟节点借用 Item 从右兄弟节点借用 Item 与左兄弟节点或者右 ...

  8. 基于.NetCore开发博客项目 StarBlog - (26) 集成Swagger接口文档

    前言 这是StarBlog系列在2023年的第一篇更新~ 在之前的文章里,我们已经完成了部分接口的开发,接下来需要使用 curl.Postman 这类工具对这些接口进行测试,但接口一多,每次测试都要一 ...

  9. 移动 WEB 开发布局方式 ---- flex 布局

    一.flex布局体验 1.1 传统布局 flex 布局 1. 2 初体验 1. 搭建 HTML 结构 <div> <span>1</span> <span&g ...

  10. 【已解决】rust 报错 no_std can't find crate for `test` || vscode 工作区多文件夹

    遇到下面的问题,请修改vscode的设置文件 如下 { "rust-analyzer.checkOnSave.allTargets": false, "rust-anal ...