vue3.0中ref动态绑定
// 自己使用 <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动态绑定的更多相关文章
- vue3.0中的双向数据绑定方法
熟悉vue的人都知道在vue2.x之前都是使用object.defineProperty来实现双向数据绑定的 而在vue3.0中这个方法被取代了 1. 为什么要替换Object.definePrope ...
- Vue3.0中引入地图(谷歌+高德+腾讯+百度)
1 概述 项目需求需要引入地图,对于目前最新的Vue3.0,无论是百度/高德/腾讯地图目前还没有适配,只有Vue 2.x版本的: 目前只有谷歌地图的Vue3.0适配: 但是没有适配并不代表不能使用,本 ...
- Vue组件篇——Vue3.0中使用高德地图
VUE-CLI 3.0 中配置高德地图 在项目开发中,地图组件 1.首先,需要注册高德开放平台的账号,并在[应用管理]页面[创建新应用],为应用添加Key值 高德开放平台:https://lbs.am ...
- vue3.0中如何使用ueditor
1.在官网下载一个ueditor版本[https://ueditor.baidu.com/website/download.html],解压后放到public文件下的static文件中重命名为Edit ...
- 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# ...
- vue3.0自定义指令(drectives)
在大多数情况下,你都可以操作数据来修改视图,或者反之.但是还是避免不了偶尔要操作原生 DOM,这时候,你就能用到自定义指令. 举个例子,你想让页面的文本框自动聚焦,在没有学习自定义指令的时候,我们可能 ...
- vue3系列:vue3.0自定义弹框组件V3Popup|vue3.x手机端弹框组件
基于Vue3.0开发的轻量级手机端弹框组件V3Popup. 之前有分享一个vue2.x移动端弹框组件,今天给大家带来的是Vue3实现自定义弹框组件. V3Popup 基于vue3.x实现的移动端弹出框 ...
- vue3系列:vue3.0自定义虚拟滚动条V3Scroll|vue3模拟滚动条组件
基于Vue3.0构建PC桌面端自定义美化滚动条组件V3Scroll. 前段时间有分享一个Vue3 PC网页端弹窗组件,今天带来最新开发的Vue3.0版虚拟滚动条组件. V3Scroll 使用vue3. ...
- vue3.0 props
.orange { color: rgba(255, 165, 0, 1) } Vue3.0 props 1.你是否遇到了,引用props数据报错的问题? 在Vue3.0中,采用了proxy,让很多数 ...
- vue3.0的变化
初涉vue3.0,下面是我在demo中遇到的一些问题(我是用的vue-cli进行开发) [1]main.js中配置 第一个变化 vue2.x === Vue.prototype.$baseURL= ...
随机推荐
- 关于JavaScript每句结尾是否需要添加分号问题
最近在学习JS的时候遇到这么一个问题.由于我之前的学习中一直是写一句JS代码,加一个分号.但是最近我才发现原来JS代码是可以不添加分号的.如果可以不写分号的话会不会更省事呢?于是我在网上查了相关资料整 ...
- 使用Google OR-Tools分析过去20年中国金融资产最佳配置组合
前两天,在朋友圈里看到一张截至2022年Q2的金融资产历年收益图如下,图中列举了国内从2005年到2022年近20年主要的金融资产历年收益率,随产生想法分析和验证下面几个问题: 过去20年,基于怎样的 ...
- 解决SpringMVC重定向参数无法携带问题
解决SpringMVC重定向参数无法携带问题 场景 重定向时请求参数会丢失,我们往往需要重新携带请求参数,我们可以进⾏⼿动参数拼接如下: return "redirect:handle01? ...
- 二阶段目标检测网络-FPN 详解
论文背景 引言(Introduction) 特征金字塔网络 FPN FPN网络建立 Anchor锚框生成规则 实验 代码解读 参考资料 本篇文章是论文阅读笔记和网络理解心得总结而来,部分资料和图参考论 ...
- SQLMap入门——获取当前网站数据库的名称
列出当前网站使用的数据库 python sqlmap.py -u http://localhost/sqli-labs-master/Less-1/?id=1 --current-db
- 区块链,中心去,何曾着眼看君王?用Go语言实现区块链技术,通过Golang秒懂区块链
区块链技术并不是什么高级概念,它并不比量子力学.泡利不相容原则.哥德巴赫猜想更难以理解,但却也不是什么类似"时间就是金钱"这种妇孺皆知的浅显道理.区块链其实是一套统筹组织记录的方法 ...
- 带你读AI论文丨针对文字识别的多模态半监督方法
摘要:本文提出了一种针对文字识别的多模态半监督方法,具体来说,作者首先使用teacher-student网络进行半监督学习,然后在视觉.语义以及视觉和语义的融合特征上,都进行了一致性约束. 本文分享自 ...
- M.2 SSD固态硬盘上安装windows问题
近来M2硬盘大降价,笔记就趁便宜买了一个2T的M.2固态硬盘,插在笔记本上,接下来安装win11,本想以前安装多次,也是老手了,没想到遇到很多问题,一度陷入僵局,不过最终还是安装成功了,下面记录下安装 ...
- C#开发的磁吸屏幕类库 - 开源研究系列文章
上次写了一个关于线程池的博文,里面讲到了关于磁吸屏幕的类库,今天就把这个类库进行下讲解. 一. 类库目录: 类库的目录见下图,主要定义了Win32的一些API,以及一些API使用到的常量和结 ...
- 一文详解 Linux Crontab 调度任务
最近接到这样一个任务: 定期(每天.每月)向"特定服务器"传输"软件服务"的运营数据,因此这里涉及到一个定时任务,计划使用Python语言添加Crontab依赖 ...