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 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
Vue多选列表组件深入详解
Mar 02 Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
vue+echarts实现多条折线图
Mar 21 Vue.js
Vue.Draggable实现交换位置
Apr 07 Vue.js
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
vue组件vue-esign实现电子签名
Apr 21 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将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
基于jQuery架构javascript基础体系
2011/01/01 Javascript
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
javascript如何实现暂停功能
2015/11/06 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
Bootstrap select实现下拉框多选效果
2016/12/23 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
python实现RSA加密(解密)算法
2016/02/17 Python
python实现小世界网络生成
2019/11/21 Python
numpy中三维数组中加入元素后的位置详解
2019/11/28 Python
html5 学习简单的拾色器
2010/09/03 HTML / CSS
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
英国最大的独立摄影零售商:Park Cameras
2019/11/27 全球购物
建筑工程管理专业自荐信范文
2013/12/28 职场文书
写给爸爸的道歉信
2014/01/15 职场文书
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
小学教师寄语大全
2014/04/03 职场文书
集中整治工作方案
2014/05/01 职场文书
诚信的演讲稿范文
2014/05/12 职场文书
2014年安全员工作总结
2014/11/13 职场文书
史上最牛的辞职信
2015/02/28 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
2015年女工委工作总结
2015/07/27 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript