专栏首页狮乐园高级 Vue 组件模式 (5)

高级 Vue 组件模式 (5)

05 使用 $refs 访问子组件引用

目标

在之前的文章中,详细阐述了子组件获取父组件所提供属性及方法的一些解决方案,如果我们想在父组件之中访问子组件的一些方法和属性怎么办呢?设想以下一个场景:

  • 当前的 custom-button 组件中,有一个 input 元素
  • 我们期望当 toggle 的开关状态为时,显示 input 元素并自动获得焦点

这里要想完成目标,需要获取某个组件或者每个元素的引用,在不同的 mvvm 框架中,都提供了相关特性来完成这一点:

  • angularjs: 可以使用依赖注入的 $element 服务
  • Angular: 可以使用 ViewChild、ContentChild 或者 template ref 来获取引用
  • react: 使用 ref 属性声明获取引用的逻辑

在 vue 中,获取引用的方法与 react 类似,通过声明 ref 属性来完成。

实现

首先,在 custom-button 组件中增加一个 input 元素,如下:

<input v-if="on" ref="input" type="text" placeholder="addtional messages">

注意这里的 ref="input",这样在组件内部,可以通过 this.$refs.input 获得该元素的引用,为了实现目标中提及的需求,再添加一个新的方法 focus 来使 input 元素获取焦点,如下:

focus() {
  this.$nextTick(function() {
    this.$refs.input.focus();
  });
},

注意这里的 this.$nextTick,正常情况下,直接调用 input 的 focus 方法是没有问题的,然而却不行。因为 input 的渲染逻辑取决于 prop 属性 on 的状态,如果直接调用 focus 方法,这时 input 元素的渲染工作很可能还未结束,这时 this.$refs.input 所指向的引用值为 undefined,继续调用方法则会抛出异常,因此我们利用 this.$nextTick 方法,将调用的逻辑延迟至下次 DOM 更新循环之后执行。

同理,在 app 组件中,为 custom-button 添加一个 ref 属性,如下:

<custom-button ref="customButton" :on="status.on" :toggle="toggle"></custom-button>

之后修改 onToggle 方法中的逻辑以满足目标中的需求,当 toggle 组件状态为开时,调用 custom-button 组件的 focus 方法,如下:

onToggle(on) {
  if (on) this.$refs.customButton.focus();
  console.log("toggle", on);
}

成果

点击按钮会发现,每当开关为开时,input 元素都会显示,并会自动获得焦点。

你可以通过下面的链接来看看这个组件的实现代码以及演示:

总结

文章中所举例子的交互,在实际场景中很常见,比如:

  • 当通过一个 icon 触发搜索框时,期望自动获得焦点
  • 当表单校验失败时,期望自动获得发生错误的表单项的焦点
  • 当复杂列表的筛选器展开时,期望第一个筛选单元获得焦点

这几种情况下,都可以使用该模式来高效地解决问题,而不是通过使用 DOM 中的 api 或者引入 jquery 获取相关元素再进行操作。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 高级 Angular 组件模式 (2)

    我们需要实现的需求是能够使使用者通过<toggle>组件动态的改变包含在它内部的内容。

    littlelyon
  • 高级 Vue 组件模式 (1)

    去年,曾经阅读过一系列关于高级 react 组件模式的文章,今年上半年,又抽空陆陆续续地翻译了一系列关于高级 angular 组件模式的文章,碰巧最近接手了一个...

    littlelyon
  • 高级 Angular 组件模式 (1)

    Angular到现在已经到5.x的版本了,对于MVVM框架我首先接触的是angularjs后来又转为react,之后换了工作因项目技术栈的原因又转换到之前的an...

    littlelyon
  • 综述 | 相机标定方法

    在图像测量过程以及机器视觉应用中,为确定空间物体表面某点的三维几何位置与其在图像中对应点之间的相互关系,必须建立相机成像的几何模型,这些几何模型参数就是相机参数...

    小白学视觉
  • 综述 | 相机标定方法

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    用户1150922
  • 综述 | 相机标定方法

    在图像测量过程以及机器视觉应用中,为确定空间物体表面某点的三维几何位置与其在图像中对应点之间的相互关系,必须建立相机成像的几何模型,这些几何模型参数就是相机参数...

    AI算法与图像处理
  • 【相机标定篇】单目相机标定原理(1)

    空间物体呈现的是三维几何位置,相机内的投影图像为二维位置,所以,确定空间物体某点的三维几何位置与其投影图像中对应点的关系,就是标定。

    threeQing
  • 干货 | 携程火车票N倍增长背后,有哪些创新的管理方法

    作者简介 杨春勤,携程高级项目经理。目前负责携程黄埔训练营,致力于通过OK制和OKR的培训传播,释放团队创业激情、提升产品研发效率。 ? 引言 ? 携程集团内火...

    携程技术
  • 行走在消失中的5种编程语言

    来自:IT经理网(微信号: ctociocom) 链接:www.ctocio.com/ccnews/23425.html(点击尾部阅读原文前往) 不少编程语言...

    顶级程序员
  • 在Ubuntu 16.04上安装Java

    Java是世界上最流行的编程语言之一。Java可用于创建从软件到基本Web应用程序的任何内容。

    阿小庆

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动