// 自己使用

<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. 小技巧 EntityFrameworkCore 实现 CodeFirst 通过模型生成数据库表时自动携带模型及字段注释信息

    今天分享自己在项目中用到的一个小技巧,就是使用 EntityFrameworkCore 时我们在通过代码去 Update-Database 生成数据库时如何自动将代码模型上的注释和字段上的注释携带到数 ...

  2. 更改jenkins的工作目录

    1.原始工作空间 2.目的盘符 3.任务管理器,找到Jenkins邮件转到详细信息 4.找到jenkins.exe打开文件所在位置 5.找到jenkins.xml打开 6.修改value值 改前: 改 ...

  3. des_招标

    网站 aHR0cHM6Ly9jdGJwc3AuY29tLyMv 翻到第二页,加载了一个2,并且返回的都是加密的数据  点到initiator,可以看到发送的Axios请求,尝试全局搜索intercep ...

  4. Android的诞生

    Android操作系统最初由Andy Rubin开发,刚开始主要支持手机,被Google收购后,对Android进行了改良,使其可以用于平板电脑等其它领域. 1.1.1 Android的发展史Andr ...

  5. 学习js的一些笔记

    1,对变量的一些认识 在学习java的过程中,我对变量的理解,其实就是一个在运行期进行简单储存的数据的内存空间,运行期结束后就会在各个代码的垃圾回收机制中在内存空间中消除. 对于变量,在java中,一 ...

  6. 基于MongoDb的事件订阅实现hook监听

    详情请参考原文:-- 基于MongoDb的事件订阅实现hook监听(insert,update,remove,find等事件开始,事件成功等)

  7. Hello 2023 A-D

    比赛链接 A 题意 给一个字符串每个物品对应的灯的照明方向,L/R 能照亮它左侧/右侧的所有物品(不包括自己对应的物品),现在能交换相邻两个灯一次(不改变照明方向),问能否找亮所有物品. 题解 知识点 ...

  8. 【3.x合批亲测】使用这个优化方案,iPhone6也能飞起来,直接拉满60帧!

    大家好,我是晓衡! 上周我花了3天的时间,体验测试了一款 Creator 3.x 性能优化工具:98K动态分层合批. 它能将 DrawCall 超过 1000+ 次的 2D 界面,实现运行时节点分层排 ...

  9. UEditor采坑指南

    1.版本选择 GitHub上的最新版(1.5)没有提供后端代码.想要后端代码可以下载历史版本(1.4.3.3). 1.5版本:https://github.com/fex-team/ueditor 1 ...

  10. java基础:方法

    方法 方法是解决一类问题的步骤的有序组合 包含于类/对象中 设计原则 方法的原子性:一个方法只实现一个功能 定义与调用 方法的组成: 方法的调用 若方法返回值为空 System.out.println ...