// 自己使用

<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. 【开源库推荐】#4 Poi-办公文档处理库

    原文:[开源库推荐] #4 Poi-办公文档处理库 - Stars-One的杂货小窝 github仓库apache/poi Apache POI是Apache软件基金会的开放源码函式库,POI提供AP ...

  2. Github Actions 学习笔记

    Github Actions是什么? Github Actions 官方介绍:GitHub Actions是一个持续集成和持续交付(CI/CD)平台,允许您自动化构建.测试和部署管道.您可以创建构建和 ...

  3. MIsc writeup

    1. 杂项 图片里面有什么 ,附件为一张图片 通过Binwalk查看发现有压缩包,通过foremost分离一下. 打开输出文件,发现里面有两个图片. 00000000.png是原图,00000722. ...

  4. 结合商业项目深入理解Go知识点

    这篇文章比较硬核,爆肝5千字,把之前整理的知识点都串起来了.建议先收藏,慢慢看. 前言 上一篇文章 #[Go WEB进阶实战]开源的电商前后台API系统 很受大家欢迎,有好多小伙伴私信我问题:&quo ...

  5. [OpenCV实战]44 使用OpenCV进行图像超分放大

    图像超分辨率(Image Super Resolution)是指从低分辨率图像或图像序列得到高分辨率图像.图像超分辨率是计算机视觉领域中一个非常重要的研究问题,广泛应用于医学图像分析.生物识别.视频监 ...

  6. [机器学习] Yellowbrick使用笔记8-模型选择可视化

    Yellowbrick可视化工具旨在指导模型选择过程.一般来说,模型选择是一个搜索问题,定义如下:给定N个由数值属性描述的实例和(可选)一个估计目标,找到一个由特征.算法和最适合数据的超参数组成的三元 ...

  7. Java内存区域有哪些构成?

    目录 前言 Java 内存区域 程序计数器 虚拟机栈 本地方法栈 堆 方法区 字符串常量池 运行时常量池 直接内存 小结 作者:小牛呼噜噜 | https://xiaoniuhululu.com 计算 ...

  8. [C#]关于逆变与协变的基本概念和修饰符in与out的意义

    协变与逆变的概念 假如两个类型X和Y具有特殊关系,X类型的每个值都能转换成Y类型.我们将I<X>向I<Y>的转换称为协变转换.反之我们将I<Y>向I<X> ...

  9. Linux基础操作-02

    Linux操作 Linux操作权限 显示详细信息之后,文件地权限显示 drwxrwxrwx "-" 表示常规文件 d 目录文件 b 块特殊设备 c 字符特殊设备文件 p 管道设备文 ...

  10. 毫米波雷达 TI IWR1443 初体验

    文章目录 1 前言 2 准备工作 2.1 mmWave SDK 2.2 Code Composer Studio(CCS) 2.3 Uniflash 2.4 MATLAB runtime 2.5 TI ...