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+iview实现文件上传
Nov 17 Vue.js
详解Vue中的自定义指令
Dec 07 Vue.js
全面解析Vue中的$nextTick
Dec 24 Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
vue-video-player 断点续播的实现
Feb 01 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
Vue常用API、高级API的相关总结
Feb 02 Vue.js
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
vue自定义右键菜单之全局实现
Apr 09 Vue.js
vue特效之翻牌动画
Apr 20 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为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
PHP 调试工具Debug Tools
2011/04/30 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
2007/03/06 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
javascript使用定时函数实现跳转到某个页面
2013/12/25 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
JavaScript学习笔记之JS事件对象
2015/01/22 Javascript
javascript 闭包详解
2015/07/02 Javascript
JavaScript表单验证实例之验证表单项是否为空
2016/01/10 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
js css自定义分页效果
2017/02/24 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
vue-router项目实战总结篇
2018/02/11 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
使vue实现jQuery调用的两种方法
2019/05/12 jQuery
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
[01:29]2017 DOTA2国际邀请赛官方英雄手办展示
2017/03/18 DOTA
python 返回列表中某个值的索引方法
2018/11/07 Python
六行python代码的爱心曲线详解
2019/05/17 Python
Python Pandas 箱线图的实现
2019/07/23 Python
10行Python代码计算汽车数量的实现方法
2019/10/23 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
python破解同事的压缩包密码
2020/10/14 Python
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
数百万免费的图形资源:Freepik
2020/09/21 全球购物
农田水利实习自我鉴定
2013/09/19 职场文书
会计自荐书
2013/12/02 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
农村党建工作汇报材料
2014/10/27 职场文书
换届选举主持词
2015/07/03 职场文书
Go 实现英尺和米的简单单位换算方式
2021/04/29 Golang