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 相关文章推荐
JS与框架页的操作代码
Jan 17 Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
javascript实现的上下无缝滚动效果
Sep 19 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
Oct 19 Javascript
js+div+css下拉导航菜单完整代码分享
Dec 28 Javascript
js实现数组内数据的上移和下移的实例
Nov 14 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
Apr 10 Javascript
详解javascript中的变量提升和函数提升
May 24 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
Apr 02 Javascript
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
layui下拉框获取下拉值(select)的例子
Sep 10 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乱码问题
2012/03/25 PHP
计算php页面运行时间的函数介绍
2013/07/01 PHP
ini_set的用法介绍
2014/01/07 PHP
zf框架的Filter过滤器使用示例
2014/03/13 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
PHP中SESSION过期设置
2021/03/09 PHP
选择复选框按钮置灰否则按钮可用
2014/05/22 Javascript
nodejs简单实现中英文翻译
2015/05/04 NodeJs
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
Bootstrap布局组件应用实例讲解
2016/02/17 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
2016/03/04 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
JS实现将二维数组转为json格式字符串操作示例
2018/07/12 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
2018/09/03 Javascript
Vuex的基本概念、项目搭建以及入坑点
2018/11/04 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
2020/08/31 Javascript
详解Python中的array数组模块相关使用
2016/07/05 Python
Linux RedHat下安装Python2.7开发环境
2017/05/20 Python
python回调函数中使用多线程的方法
2017/12/25 Python
Python3编码问题 Unicode utf-8 bytes互转方法
2018/10/26 Python
Django之Mode的外键自关联和引用未定义的Model方法
2018/12/15 Python
python 调用钉钉机器人的方法
2019/02/20 Python
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
建筑工程实习自我鉴定
2013/09/19 职场文书
文明教师事迹材料
2014/01/16 职场文书
电大毕业个人生自我鉴定
2014/03/26 职场文书
班组长竞聘书
2014/03/31 职场文书
团代会邀请函
2015/02/02 职场文书
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript
Python内置数据类型中的集合详解
2022/03/18 Python