快活林资源网 Design By www.csstdc.com
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跨层级获取组件的步骤的详细内容,更多关于vue 使用Ref获取组件的资料请关注其它相关文章!
快活林资源网 Design By www.csstdc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
快活林资源网 Design By www.csstdc.com
暂无评论...
更新日志
2024年05月17日
2024年05月17日
- 高胜美《经典金选》1991-1994 4CD[WAV整轨][1.9G]
- 【迷幻电音】AstralWaves-2023-Singles,RemixesandRaritiesII(FLAC)
- 中唱唱片群星《好歌珍藏-游子情深》2CDWAV
- 张国荣.2011-极品天碟LPCD45II(雨果版)【环球】【WAV+CUE】
- 张学友《醒着做梦》[DFF][1.1G]
- 刘惜君 《如我》[WAV分轨][403M]
- 白玛多吉《梦》限量1:1母盘直刻[低速原抓WAV+CUE][508M]
- 魏金栋-金歌新曲-梦里全是桂花香2CD[天凡之音][WAV+CUE]
- 鲛岛有美子-樱花赋HQCD[天龙][WAV+CUE]
- [In-Akustik7506]ReferenceSoundEdition-GreatWomenOfSong(2014)HQCD[WAV+CUE]
- 日本EMI超级名盘TOGE-11035-36BeethovenFidelio-Furtwngler
- 宝丽金50周年2010《古典篇》3CD限定盘[低速原抓WAV+CUE]
- 华纳群星.1992-永远新一天华纳15周年金钻群星演唱会2CD【华纳】【WAV+CUE】
- 原声《功夫熊猫4 OST》[FLAC][545M]
- 陈奕迅《酝酿》[WAV分轨][502M]