vue获取子组件ref,

　　本文主要介绍vue使用Ref跨级获取组件的步骤，帮助大家更好的理解和使用Vue框架。感兴趣的朋友可以了解一下。

Vue使用Ref跨层级获取组件实例

示例介绍

　　在开发过程中，不可避免地会用到跨级ref实例获取。在大多数情况下，我们可以通过组件自己的父组件或子组件找到所需的实例。但当层次不明显或太深时，这种方法就不可避免地显得过于臃肿，效率低下。

　　如下图所示，我们通过组件e得到组件D的组件实例。

文档目录结构

　　有A、B、C、D、E、index六个组件，按照上图中的组件顺序插入到各自的页面中。

　　页面样式如下：

安装vue-ref

　　下载vue-ref

　　npm安装vue-ref -保存

　　全球注册

　　从“vue-ref”导入参考

　　Vue.use(引用)

　　施用方式

　　！- vm.dom将是dom节点-

　　p v-ref=c=this.dom=chello/p

　　！- vm.child将是子组件实例-

　　子组件v-ref= c=this . child=c /子组件

　　span v-for= n in 10 :key= n v-ref=(c，key)={.}{{ n }} /span

根组件自定义方法[使用provide和inject]

　　在我们的索引页面中，提供了三种方法：它们用于：

　　设置子组件setChildrenRef的实例。

　　从组件实例获取，getChildrenRef

　　获取当前节点实例getRef。

　　提供(){

　　返回{

　　setChildrenRef: (name，ref)={

　　这个[名称]=ref

　　},

　　getChildrenRef: name={

　　归还此[姓名]

　　},

　　getRef: ()={

　　归还这个

　　}

　　}

　　},

分别说明各个页面

　　组件页面a:

　　通过注入方法获取setChildrenRef方法，通过上面的指令缓存组件D。

　　组件页面b:

　　组件页面c:

　　组件页面d:

　　e组件页面：

　　在这个页面中，我们不仅注入了两个方法，还设置了一个方法来切换组件D的颜色，用来测试我们是否真的跨级得到了组件D的实例。

结果

　　可以看到，parent的三个实例是一样的，组件D的文本样式已经在组件e中修改成功了，好！

　　以上是Vue使用Ref跨级获取组件的步骤细节。更多关于vue使用Ref获取组件的信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。