vue如何优雅地获取跨层级组件

最新推荐文章于 2023-07-11 15:40:34 发布
最新推荐文章于 2023-07-11 15:40:34 发布
阅读量585 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hi_zf/article/details/114629876
版权

组件实例,组件加载完成后都会有一个组件实例,一般情况下我们只需要操作数据,但是随着业务的复杂,也有需要操作实例的情况

ref 引用信息

在这里插入图片描述
在标签中使用ref属性标记标签,在代码中this.refs.XXX 得到引用,如果是普通标签得到的是DOM节点,如果是组件得到的是组件的实例(上图有注释)

跨层获取可以通过parent/children 但是复杂的跨层就会很麻烦,如使用递归:

在这里插入图片描述
callback ref
在这里插入图片描述
利用钩子函数,主动通知消费者

标签:
在这里插入图片描述

组件:
组件

hi_zf
关注
专栏目录
Vue组件跨层级获取组件实例
萝卜斯基先生的博客
05-30 7186
this.$parent 访问父实例 this.$children 当前实例的直接子组件。(不保证顺序,不是响应式) this.$parent.$parent.$refs.xxx 跨级访问父组件 this.$children.$children.$refs.xxx 跨级访问子组件 这种递归的方式 代码繁琐 性能低效 ref 只能获取当前组件上下文组件 无法跨层级 ref 是字符串 被用来给...
Vue3 企业级优雅实战 - 组件库框架 - 4 组件库的 CSS 架构
jh035的博客
11-19 636
ITCSS 分层非常细致，咱们组件库的样式在其基础上进行了简化，省略了 Base 层 或 Objects 层。而对于 Trumps 层，咱使用 ACSS 来替代，对于 Components 层，里面的每个组件内部又使用 BEM。这一层可以在组件库中省略，在各个具体的应用中引入对应css。Base 主要是存放部分重置样式的自定义，如 html、body、section 等，这部分咱们暂时没有自定义的内容，就无需编写了。通常是对浏览器样式的重置，统一 HTML 标签在不同浏览器中的展示，屏蔽浏览器间的差异。
Vue_010_如何优雅的获取跨层级组件实例
编程农民工的博客
06-12 358
ref引用信息 递归查找 代码繁琐 性能低效
【vuejs开发】如何在vue里面优雅的解决跨域，路由冲突问题！超详细
weixin_33804582的博客
10-25 553
原创文章，作者：stark，如若转载，请注明出处：https://shudong.wang/10233.html 如何在vue里面优雅的解决跨域，路由冲突问题 当我们在路由里面配置成以下代理可以解决跨域问题 proxyTable: { '/goods/*': { target...
vue 点击遮罩层功能区以外的地方关闭遮罩层
GongWei_的博客
04-29 2833
点击红色框外的遮罩层区域关闭遮罩层 方法一： 关键点：@click=“close($event)” ref=“msk” <div v-if="popup.winning" class="coupon-popup" @touchmove.prevent @click="close($event)"> <div class="popup-content" ref="msk"> <img class="coupon-page" :src="popup.couponpage.
VUE点击遮罩层内功能区以外的地方，遮罩层关闭
weixin_43294092的博客
07-01 2370
VUE点击遮罩层内功能区以外的地方，遮罩层关闭 1.template代码 <button @click="writeMessageShow=true">打开遮罩</button> <section class="wmassageMask" v-show="writeMessageShow" @click="writeMessageFun($event)"> 　　<div class="messageMaskContent" ref="msk"> 　　　　&lt
vue点击除这个元素以外的页面其它元素让这个元素隐藏
weixin_52923266的博客
01-14 2115
1.使用ref绑定到要隐藏的元素身上,使用document.addEventListener给全局添加监听事件. 2.使用contains方法判断绑定的元素是否存在于页面的DOM中(包含关系),只会返回布尔值,咱们默认返回false.3.button按钮记得阻止冒泡,否则点击事件将失效.
Vue组件跨层级获取组件操作
10-15
为了更优雅地跨层级访问组件实例，可以使用vue-ref插件。这个插件通过`provide`和`inject`的组合提供了类似于React中context的功能。 首先，需要安装vue-ref插件： ```shell npm install vue-ref # 或者 yarn add ...
基于vue与elementui组件中talbe实现的无限级联treetable
08-10
而Element UI是基于Vue.js设计的一套优雅的组件库，提供了诸如按钮、表格、下拉框等常见的UI元素。 在标题"基于vue与elementui组件中talbe实现的无限级联treetable"中，我们关注的重点是`Tree Table`和`无限级联`。...
antd tree 动态添加_Vue高性能渲染大数据Tree组件「实践」
weixin_39907131的博客
11-19 1841
作者：jayzou转发连接：https://segmentfault.com/a/1190000021228976背景项目中需要渲染一个5000+节点的树组件，但是在引入element Tree组件之后发现性能非常差，无论是滚动、展开/收起节点还是点击节点卡顿都非常明显，利用performance跑一下性能数据发现到问题所在从上图可以看到，除去Idle之外，总共花费的时间为12s，其中Script...
vuex 基础知识 (跨组件传值)
Tianxiaoxixi的博客
08-08 2890
vuex 基础知识 (跨组件传值)
vue获取当前点击元素的父元素、子元素、上级元素等
最新发布
wyc_beyond的博客
07-11 2817
children 该组件实例的子组件实例。$parent 该组件实例的父级组件实例。
vue多层级无限递归组件深层次获取ref
是夜色太荒芜的专栏
08-19 2381
问题 我的页面结构是这样的。 根据组件循环布局组件，布局组件循环自身，直到遇到渲染组件为止。 我需要拿到最终所有的渲染组件的ref而触发其动作。但在实际过程中却遇到因为递归层次太深。拿不到所有的ref。而且因为布局组件比如标签页布局的特殊性只能拿到当前所在的标签页，而不能触发其他标签页的方法。 我当时用的方式是这样 // 地图渲染事件 if (Array.isArray(this.$refs.nestedComponents)) { this.$refs.nestedComponents.forEach
【Vue五分钟】 五分钟了解Vue的基础篇
Lushengshi的博客
09-22 765
本文讲解的是指令的本质是什么？以及常用的高级特性有哪一些？以及应该怎么优雅的获取跨层级组件实例？还有template和JSX的对比以及他们的本质是什么？快来看一看吧！
【Vue 开发实战】基础篇 # 13：如何优雅地获取跨层级组件实例（拒绝递归）
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
09-15 394
这个指令，用于通知上层节点更新了。我们可以找一下依赖 vue-ref 这个包。比如E节点更新就通知A组件，A组件进行ref的缓存即可。"A 组件 setChildrenRef""A 组件 getChildrenRef"【Vue 开发实战】学习笔记。"A 组件 getRef"完整源码可以参考这个。
vue中$refs的使用：通过ref的绑定来使input框自动获取焦点
qq_51196135的博客
02-10 6590
使用背景： 在vue中一般很少会直接操作DOM，但偶尔会用到，这时可以通过【ref和$refs】两个来实现（减少获取dom节点的消耗）。 ref的用法： ref是用来给元素或子组件注册引用信息，引用信息会注册在父组件的 $refs 对象上。 ①ref 加在普通的元素上，用this.$refs.name获取到的是dom元素 ②ref 加在子组件上，用this.$refs.name获取到的是组件实例，可以使用组件的所有方法。 注：ref 需要在dom渲染完成后才会有，在使用的时候确保dom已..
vue中$refs的用法及作用详解
鸡血博客
09-18 2119
一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。 但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。 然后在javascript里面这样调用：this.$refs.input1这样就可以减少获取dom节点的消耗了 用法如下: ...
VUE-使用refs获取嵌套组件中的值
LzzMandy的博客
06-08 5903
功能简介： 1、父组件包含zujian1，而zujian1又包含zujian2 2、zujian2绑定一个输入参数 <input ref="query" v-model="query" @keypress="doSearch"/> 3、父组件获得输入框中的值，通过this.$refs.组件名来获取dom元素，多层嵌套，要调多次 // 记录输入框的值 this...
Vue组件跨层级通信
萝卜斯基先生的博客
05-30 3007
**组件跨层级通信**
Vue Ref教程：跨层级获取组件实例详解与示例
在Vue.js开发中，"Vue使用Ref跨层级获取组件的步骤"是一个关键知识点，当项目中组件层级复杂时，传统的通过`parent`或`children`属性寻找实例可能会变得低效和冗余。本文档详细介绍了如何在Vue中利用`vue-ref`库来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值