Vue使用Ref跨层级获取组件的步骤


Posted in Vue.js onJanuary 25, 2021

Vue使用Ref跨层级获取组件实例

示例介绍

在开发过程中,我们难免会使用到跨层级的ref实例获取,大部分情况下,我们都可以通过组件自身的parent或者children去找到需要的实例。但是当层级不明显或者太深的时候,用此方法难免过于臃肿和低效率。

如下图所示,我们通过组件E去获取组件D的组件实例。

Vue使用Ref跨层级获取组件的步骤

文档目录结构

Vue使用Ref跨层级获取组件的步骤

分别有A、B、C、D、E和index六个组件,并按照上图的组件顺序,分别插入到各自的页面中。

页面样式如下:

Vue使用Ref跨层级获取组件的步骤

安装vue-ref

下载vue-ref

npm install vue-ref --save

全局注册

import ref from 'vue-ref'
Vue.use(ref)

使用方法

<!-- vm.dom will be the DOM node -->
<p v-ref="c => this.dom = c">hello</p>

<!-- vm.child will be the child component instance -->
<child-component v-ref="c => this.child = c"></child-component>

<span v-for="n in 10" :key="n" v-ref="(c, key) => {...}">{{ n }} </span>

根组件自定义方法[使用provide和inject]

我们index页面中,提供了三个方法:分别用来:

  • 设置子组件的实例,setChildrenRef
  • 获取自组件实例, getChildrenRef
  • 获取当前节点实例, getRef
provide() {
  return {
   setChildrenRef: (name, ref) => {
    this[name] = ref
   },
   getChildrenRef: name => {
    return this[name]
   },
   getRef: () => {
    return this
   }
  }
 },

分别说明各个页面

组件A页面:

Vue使用Ref跨层级获取组件的步骤

通过注入的方法,获取setChildrenRef方法,并通过上述指令,将组件D缓存起来

组件B页面:

Vue使用Ref跨层级获取组件的步骤

组件C页面:

Vue使用Ref跨层级获取组件的步骤

组件D页面:

Vue使用Ref跨层级获取组件的步骤

组件E页面:

Vue使用Ref跨层级获取组件的步骤

在这个页面中,我们不仅注入了两个方法,还设置了切换D组件颜色的方法,用来测试我们是否真的跨层级获取到了组件D的实例。

结果

Vue使用Ref跨层级获取组件的步骤

可以看到,三个parent的实例是一样的,在组件E中也成功修改了组件D的文字样式。good!

以上就是Vue使用Ref跨层级获取组件的步骤的详细内容,更多关于vue 使用Ref获取组件的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
如何封装Vue Element的table表格组件
Feb 06 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
Vue如何实现变量表达式选择器
Feb 18 Vue.js
Vue基本指令实例图文讲解
Feb 25 Vue.js
如何理解Vue前后端数据交互与显示
May 10 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
如何在Vue项目中添加接口监听遮罩
Jan 25 #Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 #Vue.js
vue 计算属性和侦听器的使用小结
Jan 25 #Vue.js
vue keep-alive的简单总结
Jan 25 #Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 #Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 #Vue.js
Vue仿Bibibili首页的问题
Jan 21 #Vue.js
You might like
PHP中创建并处理图象
2006/10/09 PHP
Yii框架上传图片用法总结
2016/03/28 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
PHP-X系列教程之内置函数的使用示例
2017/10/16 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
js文件缓存之版本管理详解
2013/07/05 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
jquery判断输入密码两次是否相等
2020/04/22 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
2016/01/14 Javascript
AngularJs  Understanding Angular Templates
2016/09/02 Javascript
node.js调用Chrome浏览器打开链接地址的方法
2017/05/17 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
2018/08/14 jQuery
关于JS解构的5种有趣用法
2019/09/05 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
用Python shell简化开发
2018/08/08 Python
Python获取数据库数据并保存在excel表格中的方法
2019/06/12 Python
python sqlite的Row对象操作示例
2019/09/11 Python
wedgwood加拿大官网:1759年成立的英国国宝级陶瓷餐具品牌
2018/07/17 全球购物
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
财务人员个人求职信范文
2013/12/04 职场文书
销售人员自我评价
2014/02/01 职场文书
渔夫的故事教学反思
2014/02/14 职场文书
简单的项目建议书模板
2014/03/12 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
公司租车协议书
2015/01/29 职场文书
通知函格式范文
2015/04/27 职场文书
追悼会悼词大全
2015/06/23 职场文书
2016大学优秀学生干部事迹材料
2016/03/01 职场文书
2019年预备党员的思想汇报:加深对党的认知
2019/09/25 职场文书
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python
Python之基础函数案例详解
2021/08/30 Python