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= ...
随机推荐
- 什么是django中间件?(七个中间件-自定义中间件)
目录 一:django中间件 1.什么是django中间件 2.django请求生命周期流程图 二:django自带七个中间件 1.研究django中间件代码规律 2.django支持程序员自定义中间 ...
- 关于如何在C#中调用C++的DLL,以及如何在C++中调用C#的DLL
一.关于如何在C#中调用C++的DLL,以及如何在C++中调用C#的DLL 注:clr指公共语言运行库 CLR是一门非常恶搞的语言,就好像是在C++里面写C#的文件一样,也就是一种所谓的"托 ...
- Chaos 测试下的若干 NebulaGraph Raft 问题分析
Raft 是一种广泛使用的分布式共识算法.NebulaGraph 底层采用 Raft 算法实现 metad 和 storaged 的分布式功能.Raft 算法使 NebulaGraph 中的 meta ...
- excel甘特图制作
1.插入图表 1 1.选中数据区域(3列,如图所示)--点击插入--推荐的图表--堆积条形图 END 2.甘特图制作 1 2.点击图表工具--设计--选择数据. 轴标签区域改为--确定项目.. ...
- OPPO 后端开发 一、二面面经
你好,我是 Guide,看了这么多面试成功的经验分享,今天来看一个读者分享的 Oppo 秋招面试失败经历. 面经合集请看:Java面试题&面经精选集. 下面是正文(文中的我为读者本人). 个人 ...
- 使用Rancher管理K3s
rancher中国镜像站地址 https://rancher-mirror.oss-cn-beijing.aliyuncs.com/ https://rancher-mirror.rancher.cn ...
- Python 内置界面开发框架 Tkinter入门篇
本文大概 4158 个字,阅读需花 10 分钟 内容不多,但也花了一些精力 如要交流,欢迎关注我然后评论区留言 谢谢你的点赞收藏分享 首先,今天先给大家拜个好年!新年快乐,恭喜发财!为了感谢大家对我的 ...
- 在Mac OS上将Node.js连接到XAMPP MySQL服务器一直报错error connecting: Error: connect ECONNREFUSED
以下為通過node.js連線本機mysql資料庫的方法: var mysql = require('mysql'); var connection = mysql.createConnection({ ...
- Spring Native打包本地镜像,无需通过Graal的maven插件buildtools
简介 在文章<GraalVM和Spring Native尝鲜,一步步让Springboot启动飞起来,66ms完成启动>中,我们介绍了如何使用Spring Native和buildtool ...
- 五种传统IO模型
五种传统I/O模型 作者:tsing 本文地址:https://www.cnblogs.com/TssiNG-Z/p/17089759.html 简介 提起I/O模型, 就会说到同步/异步/阻塞/非阻 ...