Vue使用Ref跨层级获取组件实例
Vue使用Ref跨层级获取组件实例
示例介绍
在开发过程中,我们难免会使用到跨层级的ref实例获取,大部分情况下,我们都可以通过组件自身的parent
或者children
去找到需要的实例。但是当层级不明显或者太深的时候,用此方法难免过于臃肿和低效率。
如下图所示,我们通过组件E
去获取组件D
的组件实例。
文档目录结构
分别有A、B、C、D、E和index六个组件,并按照上图的组件顺序,分别插入到各自的页面中。
页面样式如下:
安装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页面:
通过注入的方法,获取setChildrenRef方法,并通过上述指令,将组件D缓存起来
组件B页面:
组件C页面:
组件D页面:
组件E页面:
在这个页面中,我们不仅注入了两个方法,还设置了切换D组件颜色的方法,用来测试我们是否真的跨层级获取到了组件D的实例。
结果
可以看到,三个parent的实例是一样的,在组件E中也成功修改了组件D的文字样式。good!
Vue使用Ref跨层级获取组件实例的更多相关文章
- React获取组件实例
1. 直接new Component() 组件本身也是class,可以new,这样的组件实例意义不大 componentInstance = new Component(); 2. ReactDOM. ...
- 在被vue组件引用的 js 文件里获取组件实例this
思路: 通过调用函数 把 组件实例this 传递 到 被应用的 js文件里 实例: 文件结构 在SendThis.vue 文件中引用 了modalConfig.js import modalConf ...
- VUE自学日志02-应用与组件实例
准备好了吗? 我们刚才简单介绍了 Vue 核心最基本的功能--本教程的其余部分将更加详细地涵盖这些功能以及其它高阶功能,所以请务必读完整个教程! 应用 & 组件实例 创建一个应用实例创建一个应 ...
- vue中js获取组件实例
获取到的VM实例,外部js仍然能自由调用VM的一切属性和方法. <template> </template> <script> // 声明变量currVM let ...
- Vue使用ref 属性来获取DOM
注意,在父组件中可以使用this.$refs.属性名 获取任何元素的属性和方法,子组件不可以获取父组件中的 <!DOCTYPE html> <html lang="en& ...
- Vue组件实例间的直接访问
前面的话 有时候需要父组件访问子组件,子组件访问父组件,或者是子组件访问根组件. 在组件实例中,Vue提供了相应的属性,包括$parent.$children.$refs和$root,这些属性都挂载在 ...
- vue-learning:30 - component - 组件实例的引用方式
组件实例的引用方式 ref / $refs $root $parent $children 扩展查找任意组件实例的方法 在vue开发的项目中,通常会以一棵嵌套的组件树的形式来组织项目. 都存在着一个根 ...
- Vue深度学习(6)- 组件
使用组件 在Vue中,可以用 Vue.extend() 创建一个组件构造器: var MyComponent = Vue.extend({ template:'..........' //选项 }) ...
- vue 使用ref获取DOM元素和组件引用
在vue中可以通过ref获取dom元素,并操作它,还可以获取组件里面的数据和方法. HTML部分: <div id="app"> <input type=&quo ...
随机推荐
- jmeter流媒体在线播放HLS插件BlazeMeter - HLS Plugin实现视频在线播放压测
一.前提 近日因工作需要,需对视频在线播放功能进行压测,视频播放使用的是HLS协议,传输内容包括两部分,一是用来控制播放的m3u8文件,二是TS媒体文件.(HLS协议和m3u8详解可参考此链接:htt ...
- HCIP --- BGP综合实验
实验要求: 实验拓扑: 一.配置IP地址 L:代表环回地址(loop back 0) Y:代表业务网段的地址(loop back 1) 二.因为BGP基于IGP之上,给AS 2内配置OSPF 在R2上 ...
- web项目报错 无法解析,丢失包 是缺少本地运行jre
1.通过build path 添加add Library 2.添加jre
- Arduino IDE 开发 ESP-01S/ESP-01物联网实战检测温度湿度上传MQTT服务器
一.硬件准备 USB转ESP8266两块.DHT11温度湿度传感器.ESP8266-01/ESP8266-01一块(如果学习的话多买几块,ESP-01/ESP-01S的区别) USB转ESP8266 ...
- python-scrapy框架爬取某瓣电视剧信息--异步加载页面
前期准备,首先要有python环境+scrapy环境+pycharm环境 一.建立爬虫所需的环境,在命令行输入: scrapy startproject doubantv #命名自定义就好 会生成一个 ...
- Mono for android,Xamarin点击事件的多种写法
(一)原本java的写法(相信很多是学过java的): 需要实现接口View.IOnClickListener,最好也继承类:Activity,因为View.IOnClickListener接口又继承 ...
- Java并发包源码学习系列:CLH同步队列及同步资源获取与释放
目录 本篇学习目标 CLH队列的结构 资源获取 入队Node addWaiter(Node mode) 不断尝试Node enq(final Node node) boolean acquireQue ...
- 关于echarts中的noDataLoadingOption——loading动画的问题
在最近的一个项目中用到echarts这个插件,其中关于noDataLoadingOption配置项的问题让我困惑了好长时间.经过蛋疼的查找下,终于搞明白是版本的原因. 且看官网的介绍:ECharts, ...
- MySQL在按照某个字段分组、排序加序号
事情是这样的,最近领导给了一个新的需求,要求在一张订单表中统计每个人第一次和第二次购买的时间间隔,最后还需要按照间隔统计计数,求出中位数等数据. 由于MySQL不想Oracle那般支持行号.中位数等, ...
- 如何保持json序列化的顺序性?
说到json,相信没有人会陌生,我们天天都在用.那么,我们来讨论个问题,json有序吗?是谁来决定的呢?如何保持? 说到底,json是框架还是啥?实际上它只是一个数据格式,一个规范标准,它永远不会限制 ...