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实现下载文件流完整前后端代码
Nov 17 Vue.js
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
vue 页面跳转的实现方式
Jan 12 Vue.js
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
vue-element-admin项目导入和导出的实现
May 21 Vue.js
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
教你部署vue项目到docker
Apr 05 Vue.js
vue自定义右键菜单之全局实现
Apr 09 Vue.js
关于vue-router-link选择样式设置
Apr 30 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 Squid中可缓存的动态网页设计
2008/09/17 PHP
解析PHP生成静态html文件的三种方法
2013/06/18 PHP
curl不使用文件存取cookie php使用curl获取cookie示例
2014/01/26 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
firefox firebug中文入门教程 脚本之家新年特别版
2010/01/02 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
Vue.js 实现数据展示全部和收起功能
2018/09/05 Javascript
vue-cli项目修改文件热重载失效的解决方法
2018/09/19 Javascript
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
vue实现按需加载组件及异步组件功能
2019/05/27 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
2019/06/05 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
Windows中安装使用Virtualenv来创建独立Python环境
2016/05/31 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
python解包概念及实例
2021/02/17 Python
用纯CSS3实现网页中常见的小箭头
2017/10/16 HTML / CSS
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
我的祖国演讲稿
2014/05/04 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python