Vue自定义组件双向绑定实现原理及方法详解


Posted in Javascript onSeptember 03, 2020

前言

无论在任何的语言或框架中,我们都提倡代码的复用性。对于Vue来说也是如此,相同的代码逻辑会被封装成组件,除了复用之外,更重要的是统一管理提高开发效率。我真就接手过一个项目,多个页面都会用到的列表,没有去封装列表组件,只要有一点改动,每个页面都得加上。很肯定的说,没有用组件化开发的Vue项目是没有灵魂的。所以如何封装一个优雅且复用性高的组件成为我们必需的技能。

Tab自定义组件

首先来看一个Tab组件的实现,看看它存在什么问题,哪里可以改进?

效果

Vue自定义组件双向绑定实现原理及方法详解

组件

<template>
 <div class="tabs">
  <div 
   class="tab-item" 
   :class="{'tab--active':item===activeName}"
   v-for="(item,index) in tabs" 
   :key="index" 
   @click="tabChange(item)">
   {{item}}
  </div>
 </div>
</template>

<script>
export default {
 props:{
  tabs:{
   type: Array,
   default: ()=> []
  },
  activeName:{
   type: String,
   default: ''
  }
 },
 methods:{
  tabChange(item){
   this.$emit('tabChange',item)
  }
 },
}
</script>

使用

<template>
 <div>
  <Tabs :tabs="tabs" :activeName="activeName" @tabChange="tabChange" />
 </div>
</template>

<script>
import Tabs from '../components/Tabs'
export default {
 components:{
  Tabs
 },
 data(){
  return{
   tabs:['黄金体验','败者食尘','绯红之王','白金之星','波纹疾走'],
   activeName: '黄金体验'
  }
 },
 methods:{
  tabChange(item){
   this.activeName = item
  }
 },
}
</script>

这个组件最大的问题就是,activeName 需要使用者额外通过事件来手动更新,假如有另一个使用者接手,在不知道这种情况下使用,会出现tab没有切换的情况。然后要去看组件内部实现,再回来修改代码,很显然这样的组件是失败的。本着所有的脏活累活都由组件实现的原则,理想的状态应该是使用者不需要管理 activeName,而是由组件内部去更新。

如何改进修改prop?

可能有人会想到,既然要由内部管理,那在组件内部修改prop的值是不是就可以了?来看下这样的做法是否可行
修改组件tabChange方法,在点击时更新prop的值

tabChange(item){
 this.activeName = item
 this.$emit('tabChange',item)
}

使用时,控制台抛出警告

Vue自定义组件双向绑定实现原理及方法详解

由于prop是单向数据流,父级prop的更新会向下流动到子组件中,相反的在子组件内部直接更新状态,会导致数据的流向不明确。例如,在父组件中有多个子组件依赖同一个属性,其中一个子组件更新该属性,会引发其余子组件发生改变,发生问题时不容易被找到,因此Vue不推荐我们这样做。另外,在父组件发生更新时,子组件的prop会被刷新为最新的值。

单向数据流: https://cn.vuejs.org/v2/guide/components-props.html#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81

正解:model选项改进组件

组件model选项

允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

model: https://cn.vuejs.org/v2/api/

在model选项里,我们可以绑定一个属性,并为其添加事件,只需在调用方法时传入值即可更新属性。

<script>
export default {
 model:{
  prop: 'activeName',
  event: 'update'
 },
 props:{
  tabs:{
   type: Array,
   default: ()=> []
  },
  activeName:{
   type: String,
   default: ''
  }
 },
 methods:{
  tabChange(item){
   this.$emit('update',item) // 这里更新activeName
   this.$emit('tabChange',item)
  }
 }
}
</script>

注意你仍然需要在组件的 props 选项里声明 prop。

使用

使用组件双向绑定后,属性在组件内部被更新时,父组件的 activeName 也会随之更新,这样使用者可以很明确的知道数据可能会被修改。

<Tabs :tabs="tabs" v-model="activeName" />

总结

使用组件的model选项实现自定义组件双向绑定,在组件内部通过事件更新属性值,这样的自定义组件使用起来更优雅。其实通过model选项的方式去修改父级属性,我认为有点违反了单向数据流的原则。本来单向数据流是不允许子级修改父级属性的,只是使用v-model的语法糖,看起来会让数据流向显得更加明确,恰好弥补这个缺点。

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

Javascript 相关文章推荐
firefox中用javascript实现鼠标位置的定位
Jun 17 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
Dec 14 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 Javascript
Node.js制作简单聊天室
Jan 12 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
vue的传参方式汇总和router使用技巧
May 22 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
Jun 28 Javascript
Three.js实现3D机房效果
Dec 30 Javascript
如何在 ant 的table中实现图片的渲染操作
Oct 28 Javascript
Vue js with语句原理及用法解析
Sep 03 #Javascript
Vue通过provide inject实现组件通信
Sep 03 #Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 #Javascript
Vue父组件监听子组件生命周期
Sep 03 #Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 #Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 #Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
Sep 02 #Javascript
You might like
header()函数使用说明
2006/11/23 PHP
详解WordPress中简码格式标签编写的基本方法
2015/12/22 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
项目实践之javascript技巧
2007/12/06 Javascript
firefox下frameset取不到值的解决方法
2010/09/06 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
innerHTML在IE中报错解决方案
2014/12/15 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
微信小程序 条件渲染详解
2016/10/09 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
浅谈vue,angular,react数据双向绑定原理分析
2017/11/28 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
基于JavaScript实现一个简单的Vue
2018/09/26 Javascript
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
JS实现前端动态分页码代码实例
2020/06/02 Javascript
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
对pytorch中x = x.view(x.size(0), -1) 的理解说明
2021/03/03 Python
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
比驿:全球酒店比价网
2018/06/20 全球购物
香港演唱会订票网站:StubHub香港
2019/10/10 全球购物
大学生求职推荐信
2013/11/27 职场文书
甜点店创业计划书
2014/01/27 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
2014年银行员工工作总结
2014/11/12 职场文书
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python