Vue 中的受控与非受控组件的实现


Posted in Javascript onDecember 17, 2018

受控组件

什么是受控组件?

其值由React控制的输入表单元素称为“受控组件”。

受控组件有两个特点:1. 设置value值,value由state控制,2. value值一般在onChange事件中通过setState进行修改

什么时候使用受控组件?

需要对组件的value值进行修改时,使用受控组件。比如:页面中有一个按钮,每点击一次按钮受控组件的值加1.

非受控组件

什么是非受控组件?

表单数据由 DOM 处理的组件非受控组件。

非受控组件有两个特点:1. 不设置value值,2. 通过ref获取dom节点然后再取value值

<input type="text" placeholder="请输入姓名" name='username' ref={(input) => this.usernameElem = input}/>

取值方法:this.usernameElem.value

什么时候使用非受控组件?

任何时候都不需要改变组件的value值,这时候可以使用非受控组件。

Vue 中的受控与非受控组件

熟悉 React 的开发者应该对“受控组件”的概念并不陌生,实际上对于任何组件化开发框架而言,都可以实现所谓的受控与非受控,Vue 当然也不例外。并且理解受控与非受控对应的需求场景,可以让我们在设计一些基础组件时思路更加清晰,暴露出来的组件 API 也更加合理、统一。

需求

许多 UI 组件都是有状态(stateful)的,而这个状态是由组件外部控制还是组件内部维护,也就对应了受控与非受控两种模式。

例如 Tabs 组件是很常见的一种 UI 组件,它的核心状态就是记录当前 active 的 Tab,并且允许用户切换。

很多时候我们只希望 Tabs 可以正确的展示 active 的内容、并在用户操作时正常切换,不需要进行任何干预,那么就希望 只需要传入所有的 Tab 内容,不需要再做额外的配置。

但有的时候我们又希望对 Tabs 的状态有很强的控制能力,例如多个关联的 Tabs,子级 Tabs 的内容需要根据父级 Tabs 的 active Tab 动态切换,这时候就会希望 Tabs 组件可以暴露足够充分的 API,来实现业务的需求。

因此我们可以用一种通用的模式,来让任意组件的任意状态同时兼容受控与非受控两种模式,让不同需求场景下都可以使用最合理的 API。

简化示例

我们用一个简单的 Tabs 实现来演示这种通用的组件 API 设计模式,简化的部分包括:

  • 用 index 来作为 Tab 的唯一标识
  • Tab content 只支持字符串

可以打开 online DEMO 配合阅读

API 设计

对于 Vue 组件而言,API 设计主要指的是内部的 data, computed, methods 以及对外的 props, events。在这个示例中,我们会用 activeIdx 作为核心状态,所有的 API 也都会围绕这个状态命名。

非受控模式

如上文所说,非受控模式指的是使用者不需要关心控制组件的状体,完全交由组件内部维护。

因此我们的 API 会包括:

{
 props: {
  defaultActiveIdx: {
   type: Number,
   default: 0
  }
 },
 data() {
  return {
   localActiveIdx: this.defaultActiveIdx
  }
 },
 methods: {
  handleActiveIdxChange(idx) {
   this.localActiveIdx = idx;
   this.$emit("active-idx-change", idx);
  }
 }
}

localActiveIdx 是我们用来存放 active index 的组件内 data,对于非受控模式而言,虽然不希望在外部维护状态,但是仍有可能希望在外部决定初始状态,所以我们用 defaultActiveIdx 这个 props 决定 localActiveIdx 的初始值。

之后当我们用 v-for="(tab, idx) in tabs" 指令生成所有的 Tab 时,就可以通过 idx === localActiveIdx 的方式判断当前 Tab 是否 active,再通过 @click="handleActiveIdxChange(idx)" 就可以实现对 localActiveIdx 的更新。

同样的,我们也可以通过 {{ tabs[localActiveIdx].content }} 展示 active Tab 的内容。

需要注意的是在 handleActiveIdxChange 的事件处理中,我们也 emit 了 active-idx-change 这一事件,这样可以方便外部在不需要管理组件状态的同时也可以与组件状态保持同步。例如我们希望将 active Tab 反映在 URL 中,就可以在外部监听 active-idx-change 这一事件,并将当前 index 同步到路由中,在将路由中获取到的 index 作为 defaultActiveIdx 传入,就可以实现 URL 和 Tabs 的同步。

受控模式

对于受控模式来说,我们可以理解为 active index 是外部传入的 props,由外部自行维护其状态。

因此我们只需要添加如下 props:

props: {
 activeIdx: Number
}

由于我们已经有对外 emit 的事件 active-idx-change,所以外部用以下方式就可以用一个 data 属性 externalActiveIdx 维护对应状态:

<tabs
 :tabs="tabs"
 :activeIdx="externalActiveIdx"
 @active-idx-change="this.externalActiveIdx = $event"
/>

当然由于在这种模式下外部对状态有完全的控制权,所以在 active-idx-change 的事件处理中也可以做更为复杂的判断,例如是否允许激活目标 Tab 之类的校验。

而在 Tabs 组件内部,我们还需要做一些小的修改。在受控模式中,我们所有状态相关的处理都是直接使用 localActiveIdx,而现在我们的逻辑应该变为“如果存在 activeIdx props,则使用,否则使用 localActiveIdx”。

为了保证以上逻辑不会让我们的组件内部实现变得复杂、易错,我们引入一个 computed 属性:

computed: {
 _activeIdx() {
  return this.activeIdx || this.localActiveIdx;
 }
}

这样我们就可以把状态相关的判断改为通过 idx === _activeIdx 判断一个 Tab 是否为激活状态,也通过 {{ tabs[_activeIdx].content }} 展示 active Tab 的内容。

同样,我们在 handleActiveIdxChange 的方法内部也可以增加一个判断,如果存在 props aciveIdx 则不更新 localActiveIdx:

handleActiveIdxChange(idx) {
 if (this.activeIdx === undefined) {
  this.localActiveIdx = idx;
 }
 this.$emit("active-idx-change", idx);
}

在一些更复杂的组件中,可能会频繁判断是否为受控模式并做不同的处理,这时候通过 this.activeIdx 这样的核心状态 props 是否传入来判断是否为受控模式是一个不错的实践。

总结

最终我们为 active index 设计的完整 API 如下:

{
 props: {
  activeIdx: Number,
  defaultActiveIdx: {
   type: Number,
   default: 0
  }
 },
 data() {
  return {
   localActiveIdx: this.defaultActiveIdx
  };
 },
 computed: {
  _activeIdx() {
   return this.activeIdx || this.localActiveIdx;
  }
 },
 methods: {
  handleActiveIdxChange(idx) {
   if (this.activeIdx === undefined) {
    this.localActiveIdx = idx;
   }
   this.$emit("active-idx-change", idx);
  }
 }
}

通过这种 API 设计方式,可以让我们设计的基础组件使用方式更一致,拓展性更强,不论是开发还是使用时思路也会更加简洁清晰。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Aug 21 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
Jan 26 Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
Sep 02 Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 Javascript
JavaScript中return用法示例
Nov 29 Javascript
关于 jQuery Easyui异步加载tree的问题解析
Dec 06 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 Javascript
countUp.js实现数字动态变化效果
Oct 17 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
react基本安装与测试示例
Apr 27 Javascript
封装 axios+promise通用请求函数操作
Aug 11 Javascript
js实现移动端轮播图
Dec 21 #Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 #Javascript
微信小程序 JS动态修改样式的实现方法
Dec 16 #Javascript
Echart折线图手柄触发事件示例详解
Dec 16 #Javascript
vue使用pdfjs显示PDF可复制的实现方法
Dec 14 #Javascript
antd Upload 文件上传的示例代码
Dec 14 #Javascript
Vue源码解析之Template转化为AST的实现方法
Dec 14 #Javascript
You might like
PHP基础知识介绍
2013/09/17 PHP
php算法实例分享
2015/07/14 PHP
php 浮点数比较方法详解
2017/05/05 PHP
利用Ext Js生成动态树实例代码
2008/09/08 Javascript
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
js中indexof的用法详细解析
2013/12/24 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
2014/05/11 Javascript
jQuery实现无限往下滚动效果代码
2016/04/16 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
p5.js实现动态图形临摹
2019/10/23 Javascript
ES5新增数组的实现方法
2020/05/12 Javascript
antd配置config-overrides.js文件的操作
2020/10/31 Javascript
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
获取python文件扩展名和文件名方法
2018/02/02 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
python科学计算之narray对象用法
2019/11/25 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
DOUGLAS荷兰:购买香水和化妆品
2020/10/24 全球购物
中间件分为哪几类
2012/03/14 面试题
简历上的自我评价怎么写
2014/01/28 职场文书
职业生涯规划书范文
2014/03/10 职场文书
投标承诺书范本
2014/03/27 职场文书
拔河比赛队名及霸气口号
2015/12/24 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python