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跨层级获取组件的步骤的详细内容，更多关于vue 使用Ref获取组件的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 解决vue net :ERR_CONNECTION_REFUSED报错问题

    我是因为频繁的更换网络,导致这样的. 然后我回忆了一下.之前每次改ip都会把Package.json 中的 --host 0.0.0.0改成我的固定ip,由于改来改去太麻烦了,我就设置为0.0.0.0 所以喜提上图的一排get请求 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0", 解决办法 把 --host 0.0.0.

  • Vue 中 a标签上href无法跳转的解决方式

    问题: 使用vue-router 在IE下 a标签里的路由不跳转,火狐,chrome工作正常. 解决: 在App.vue 里增加判断IE浏览器手动修复-- export default { name: 'App', mounted(){ function checkIE(){ return '-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.s

  • vue列表单项展开收缩功能之this.$refs的详解

    vue列表单项展开收缩功能之this.$refs的详解

    展开效果–看红框区域 收缩效果–看红框区域 接下来看代码逻辑 ###template部分:已去除与本文不相关的功能代码 <li class="main-video"v-for="(item, index) of courseSubList" :key="item.id"> <div class="audio-name"> <div class="img-l"> <s

  • vue.js 实现a标签href里添加参数

    源代码 列表可以正常显示,但是连接没有实现对items.orderNo的值转化, 最中解决方法 此处的将a的标签href实现绑定:href 同时对路径进一步转化拼接 以上这篇vue.js 实现a标签href里添加参数就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Vue 解决通过this.$refs来获取DOM或者组件报错问题

    1.关于this.$refs的使用场景 如果ref属性加在普通元素上,那么this.$refs.name则指向该DOM元素 <p ref="p">hello</p> <!-- this.$refs.p 指向该DOM元素 --> 如果ref属性加在组件上,那么this.$refs.name指向该组件实例 <child-component ref="child"></child-component> <!

  • vue中$refs, $emit, $on, $once, $off的使用详解

    1.$refs的使用场景 父组件调用子组件的方法,可以传递数据. 父组件: <div id="app"> <child-a ref="child"></child-a> <button @click="getMyEvent">点击父组件</button> <div> <script> import ChildA from './child.vue' export

  • 在vue中通过render函数给子组件设置ref操作

    正常我们的写法是,这样ref不会生效,h是作用在渲染的时候的,而ref是渲染之后才创建的,因此在h函数中使用ref是无效的. render: (h, params) => { return h(expandRow, { ref:'child', props: { row: params.row } }) } 我们常见h函数的用法是: render: (h) => { return h(ele) } => 是es6的用法,相当于 (h) => {} 相当于 function(){},

  • Vue中ref和$refs的介绍以及使用方法示例

    Vue中ref和$refs的介绍以及使用方法示例

    前言 在JavaScript中需要通过document.querySelector("#demo")来获取dom节点,然后再获取这个节点的值.在Vue中,我们不用获取dom节点,元素绑定ref之后,直接通过this.$refs即可调用,这样可以减少获取dom节点的消耗. ref介绍 ref被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs对象上.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引用就指向该子组件实例 通俗的讲,re

  • vue 父组件通过$refs获取子组件的值和方法详解

    前言 在vue项目中组件之间的通讯是很常见的问题,同时也是很重要的问题,我们大致可以将其分为三种情况: 父传子:在父组件中绑定值,在子组件中用props接收 子传父:在父组件中监听一个事件,在子组件中利用$emit触发这个事件并带上数据作为第二个参数,这时父组件中监听事件的回调函数就会被调用,回调函数的参数就是子组件带上来的数据,这样就可以在父组件中使用子组件的数据了, 兄弟之间的传递:我们可以使用事件总线(eventBus)来轻松的解决,其实就是发布订阅者模式 今天我们要看的是父组件如何直接调

  • vue.js中ref和$refs的使用及示例讲解

    vue.js中ref和$refs的使用及示例讲解

    关于ref和$refs的用法及讲解,vue.js中文社区( https://cn.vuejs.org/v2/api/#ref )是这么讲解的: ref 被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的 $refs 对象上. 如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引用就指向组件: vue.js中文社区文档上的说明已经就比较通俗易懂了,其实我们可以这么理解,ref和$refs其实就是用来获取/操作DOM元素的:类似于jquey中的$(".xxx

  • vue基本使用--refs获取组件或元素的实例

    说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素) 使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取 注意:如果获取的是一个子组件,那么通过ref就能获取到子组件中的data和methods 添加ref属性 <div id="app"> <h1 ref="h1Ele">这是H1</h1> <hello ref="ho">&l

随机推荐