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 ...
随机推荐
- Hbase系列文章
Hbase系列文章 HBase(一): c#访问hbase组件开发 HBase(二): c#访问HBase之股票行情Demo HBase(三): Azure HDInsigt HBase表数据导入本地 ...
- Python高级语法-私有化-私有化理解(4.3.1)
@ 目录 1.说明 2.代码 关于作者 1.说明 __a(私有):只能在类的内部使用,对象使用,但是子类不允许使用,不能导入到其他包 a(protected):可以在子类使用,可以通过对象访问,不能导 ...
- javascript笔记day01
JavaScript基础语法 HTML :标记语言 JavaScript :编程语言 序言 JavaScript发展历史(JS) 1. 1994年,网景公司(Netscape)发布了Navigator ...
- EF Code First生成的数据表去复数(去掉数据表最后面那个s) 和 EF decimal 小数位的保留
modelBuilder.Conventions.Remove<System.Data.Entity.ModelConfiguration.Conventions.PluralizingTabl ...
- mssql不存在便插入存在不执行操作
前言 参考:https://www.jb51.cc/mssql/76911.html 在mssql中,在记录不存在时插入记录,如果存在则不执行操作 数据库 相关语句 --创建表 CREATE TABL ...
- 代替DDNS方案,自动更新CloudFlare的AAAA记录
为解决DDNS更新慢的问题,直接通过cloudflare的API来更新AAAA记录 将下面代码保存成cloudflare_ipv6_update.ps1 $config = @{} $config.z ...
- [UWP] - Adaptive Trigger Featurede的使用方法及效果
XAML代码: <Page.Resources> <!-- DataTemplate to use in the portrait layout. --> <DataTe ...
- CentOS7 实战源码部署php服务与nginx 的整合
简介:实战演练php服务的搭建 PHP是一种脚本语言,常用于做动态网站的. 源码编译安装: 安装依赖组件: yum -y install gcc gcc-c++ bzip2 bzip2-devel b ...
- Kafka 消费组消费者分配策略
body { margin: 0 auto; font: 13px / 1 Helvetica, Arial, sans-serif; color: rgba(68, 68, 68, 1); padd ...
- Spring Boot Starters
Spring Boot Starters 摘自 https://www.nosuchfield.com/2017/10/15/Spring-Boot-Starters/ 2017-10-15 Spri ...