如何写好一个vue组件,老夫的一年经验全在这了(推荐)


Posted in Javascript onMay 18, 2019

一个适用性良好的组件,一种是可配置项很多,另一种就是容易覆写,从而扩展功能

Vue 组件的 API 来自三部分——prop、事件和插槽:

  1. prop 允许外部环境传递数据给组件
  2. event 允许从组件内触发外部环境的副作用
  3. slot 允许外部环境将额外的内容组合在组件中

prop

组件具有自身状态,当没有相关 porps 传入时,使用自身状态完成渲染和交互逻辑;当该组件被调用时,如果有相关 props 传入,那么将会交出控制权,由父组件控制其行为

仅一个值传入组件

如果该组件设计上支持双向绑定,可使用v-model将该参数传入组件,减少记忆成本(毕竟 vue 官方的语法糖,不用白不用)

<my-component v-model="foo" />

如果该组件可以独立运行,不依赖父组件时,还是给这个值起个名字吧

<component-no-sync :childNeed="foo" />

很多值需要传入组件

我们原先的父组件写法:

<child-component :prop1="var1" :prop2="var2" :prop="var3" ... />

其实可以在父组件上直接使用v-bind={子组件props集合}

传入一个对象

比如当一个组件有诸多配置项,且当没有传入配置项取用组件内部默认项的时候,为了方便覆写子组件的内部配置项,不妨使用一个对象将配置收集到一起,但是这种做法有两个缺点,谨慎使用

  1. 不能利用 props 验证对象里面每个的值类型
  2. 如果你子组件修改了父组件传入的对象A,父组件的对象A也会发生修改,所以我一般只有子组件不会修改父组件传入的值的情况下,我才会传入对象。父组件把对象传入子组件,是实现双向绑定的hack方式,但不推荐,vue 3.0可能就要对这种方式说拜拜了,为了以后代码好改,还是不要用这种方式实现双向绑定
<child-component v-model="text" :setting="{color:'bule'}" />

// 子组件内部读取配置,通过扩展运算符替换掉默认配置
const setting ={
 ...defaultSetting,
 ...this.setting
}

 还有一种鱼和熊掌兼得的方法,可以给子组件包一层,叫中间组件。父组件将配置项作为一个对象传入中间组件,在中间组件里面对默认配置项进行初始化和覆写,然后再以v-bind={生成好的配置}的方式传入子组件,在子组件里面进行验证。

computed 属性

vue 的 computed 属性默认是只读的,你可以提供一个 setter。它可以优化我写组件的逻辑,适用于父组件处理的值和子组件处理的值是同一个的情况

<template>
 <el-select v-model="email">
  <el-option
   v-for="item in adminUserOptions"
   :key="item.email"
   :label="item.email"
   :value="item.email"
  />
 </el-select>
</template>
export default {
 props: {
  value: {}
 },
 computed: {
  email: {
   get() {
    return this.value
   },
   set(val) {
    this.$emit('input', val)
    this.$emit('change', val)
   }
  }
 }
}

灵活的 prop

我们常看到一些优秀的组件库,传入的值既可以是一个 String/Number,也可以是一个函数。

比如ElementUI的Table组件,当你想要显示树形数据的时候,必须传入row-key。看它的介绍就知道是有多灵活:

row-key的作用:行数据的 Key,用来优化 Table 的渲染;在使用 reserve-selection 功能与显示树形数据时,该属性是必填的。类型为 String 时,支持多层访问:user.info.id,但不支持 user.info[0].id,此种情况请使用 Function

处理 rowKey 生成 RowIdentity 的函数源码:

//https://github.com/ElemeFE/element/blob/dev/packages/table/src/util.js
export const getRowIdentity = (row, rowKey) => {
 if (!row) throw new Error('row is required when get row identity')
 // 行数据的key
 if (typeof rowKey === 'string') {
  if (rowKey.indexOf('.') < 0) {
   return row[rowKey]
  }
  // 支持多层访问:user.info.id
  let key = rowKey.split('.')
  let current = row
  for (let i = 0; i < key.length; i++) {
   current = current[key[i]]
  }
  return current
  // 通过函数自定义
  // 我处理过父和子id可能相同的情况,只好通过Function自定义
  // 不可以通过时间或者随机字符串生成ID
 } else if (typeof rowKey === 'function') {
  return rowKey.call(null, row)
 }
}

由于业务场景多变,组件的设计者很难考虑完全,不妨设计灵活的 prop,由开发者自行定义

事件

emit/on

读者肯定知道 emit/on 如何使用,我就简单说一下 vue 的 v-model和sync的语法糖,我们可以利用这些语法糖,帮助我们写出简洁的代码(父组件可以少写监听子组件的事件,比如你不用写@input)

v-model

看一下下面的代码示例,就能懂这句话了。v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值

<input v-model="searchText" />

<input
 v-bind:value="searchText"
 v-on:input="searchText = $event.target.value"
/>

// 当把v-model用在组件上

<custom-input
 v-bind:value="searchText"
 v-on:input="searchText = $event"
></custom-input>

为了让它正常工作,这个组件内的 <input> 必须:将其 value 特性绑定到一个名叫 value 的 prop 上在其 input 事件被触发时,将新的值通过自定义的 input 事件抛出,即this.$emit('input',changedValue)

自定义 v-model

为啥要自定义组件的 v-model 呢,因为数据不符合要求呗。你的输入值不可能总是 value ,你的事件不可能总是 input,具体详见文档

sync(双向绑定语法糖)

vue 真的是方便了开发者很多,站在开发者的角度考虑,很大的提升开发效率

以  update:myPropName  的模式触发事件取代双向绑定this.$emit('update:title', newTitle),具体详见文档

Function 通过 prop 传入

本来想放在 prop 部分的,但是个人觉得其实它和 emit/on 更有关系一点

有读者可能会问,为什么不能把子组件里面的事件 emit 出来,通过父组件处理?然后传入一个控制子组件的 prop 属性。
我想说的是,可以,但是这样真的很麻烦,子组件内部的状态却要依赖父组件传值。

该组件内部的状态,我们需要把它暴露出来嘛?我觉得不需要,组件内部的状态就让它处于组件内部

但是可以通过传入 function(你可以理解为一个钩子),参与组件状态变更的行为。比如很好用的拖拽库,Vue.Draggable控制元素是否被拖动的行为。

Vue.Draggable可以传入一个 move 方法,我们看一下它如何处理的。

 

onDragMove(evt, originalEvent) {
   const onMove = this.move;
   // 如果没有传入move,那么返回true,可以移动
   if (!onMove || !this.realList) {
    return true;
   }

   const relatedContext = this.getRelatedContextFromMoveEvent(evt);
   const draggedContext = this.context;
   const futureIndex = this.computeFutureIndex(relatedContext, evt);
   Object.assign(draggedContext, { futureIndex });
   const sendEvt = Object.assign({}, evt, {
    relatedContext,
    draggedContext
   });
   // 组件行为由传入的move函数控制
   return onMove(sendEvt, originalEvent);
}

 这样做的好处,就是组件内部自由一套运行逻辑,但是我可以通过传入 function 来干预。我没有直接修改组件内部状态,而是通过函数(你可以称它为钩子)去触发,方便调试组件,使得组件行为具有可预测性

父组件直接操作子组件

很少有这样的骚操作,但是由于数据和操作的复杂性,当数据结构复杂,嵌套过深的情况下,父组件很难对于子组件的数据的精细控制

因此,如果不得已而为之,请在文档里,把子组件可以调用的方法暴露出来,供使用者使用。使用这种组件比较麻烦,得去看文档,没有文档的只好去看源码

ElementUI的tree组件提供了很多方法,用于父组件去操作子组件。

eg:this.$refs.tree.setCheckedKeys([]);

插槽

HTML <slot> element 是 Web Components 技术的一部分,是自定义 web 组件的占位符,vue 里面的 slot 的灵感来自 Web Components 规范草案,具体见文档

默认插槽

能用默认插槽就不要使用具名插槽,我真的不想使用你这个组件的时候还去翻看你的插槽叫什么名字

之前我司一个网页模板 三个插槽,header,body,footer,我用的是真的难受,每次都记不得,看似三个单词都挺熟悉的,但是其实 head,content,foot 这些单词也都行啊,谁知道用啥(可能我老了吧,组件如果不是必要尽量不要让人有记忆成本)。

后备内容

就是给组件里面的插槽定义默认值,它只会在没有提供内容的时候被渲染。建议用上插槽就给它添加默认内容

封装他人组件

有些时候我们可能是对他人的组件进行封装,这里强烈推荐使用v-bind="$attrs" 和 v-on="$listeners"。 vm.$attrs 是一个属性,其包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。这些未识别的属性可以通过 v-bind="$attrs" 传入内部组件。未识别的事件可通过v-on="$listeners"传入

举个例子,比如我创建了我的按钮组件myButton,封装了 element-ui 的 el-button 组件(其实什么事情都没做),在使用组件 <my-button />时,就可以直接在组件上使用 el-button 的属性,不被 prop 识别的属性会传入到 el-button 元素上去

<template>
 <div>
  <el-button v-bind="$attrs">导出</el-button>
 <div>
</template>
// 父组件使用
<my-button type='primary' size='mini'/>

组件命名

这里推荐遵循 vue 官方指南,值得一看

我们构建组件的时候通常会将其入口命名为 index.vue ,引入的时候,直接引入该组件的文件夹即可。

但是这样做会有一个问题,当你编辑多个组件的时候,所有的组件入口都叫做index.vue,容易糊涂

vscode 显然意识到了这个问题,所以当文件名相同的文件被打开时,它会在文件名旁边显示文件夹名

如何解决呢,我们可以把 index.js 当作一个单纯的入口,不承担任何逻辑。仅仅负责引入component-name-container以及export default component-name-container

my-app
└── src
    └── components
        └── component-name
          ├── component-name.css
          ├── component-name-container.vue
          └── index.js

 tips(个人喜好)

template,把一个<template> 元素当做不可见的包裹元素,并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素
能用 computed 计算属性的,尽量就不用 watch

模板里面写太多 v-if 会让你的模板很难看,v-else-if尽量还是别用了吧。一长串的 if else,在模板里面看的很乱

以上所述是小编给大家介绍的如何写好一个vue组件详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery中绑定事件的命名空间详解
Apr 05 Javascript
js设置function参数默认值(适合没有传参情况)
Feb 24 Javascript
node.js中的buffer.length方法使用说明
Dec 14 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
详谈$.data()的用法和作用
Feb 13 Javascript
jQuery中用on绑定事件时需注意的事项
Mar 19 Javascript
vue实现手机号码抽奖上下滚动动画示例
Oct 18 Javascript
JavaScript实现简单的文本逐字打印效果示例
Apr 12 Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
Jul 22 Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 Javascript
微信小程序云开发 生成带参小程序码流程
May 18 #Javascript
详解小程序开发经验:多页面数据同步
May 18 #Javascript
JavaScript实现星级评价效果
May 17 #Javascript
JavaScript实现美化滑块效果
May 17 #Javascript
vue中使用mxgraph的方法实例代码详解
May 17 #Javascript
vue中引入mxGraph的步骤详解
May 17 #Javascript
微信小程序云开发 搭建一个管理小程序
May 17 #Javascript
You might like
用PHP读取和编写XML DOM的实现代码
2011/02/03 PHP
注意:php5.4删除了session_unregister函数
2013/08/05 PHP
PHP高手需要要掌握的知识点
2014/08/21 PHP
php 自定义错误日志实例详解
2016/11/12 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
Javascript正则控制文本框只能输入整数或浮点数
2014/09/02 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
基于jquery css3实现点击动画弹出表单源码特效
2015/08/31 Javascript
编写高性能Javascript代码的N条建议
2015/10/12 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
js拖拽的原型声明和用法总结
2016/04/04 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
js实现轮播图特效
2020/05/28 Javascript
详解React 条件渲染
2020/07/08 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
Python判断文本中消息重复次数的方法
2016/04/27 Python
在python的类中动态添加属性与生成对象
2016/09/17 Python
Python直接赋值、浅拷贝与深度拷贝实例分析
2019/06/18 Python
python将excel转换为csv的代码方法总结
2019/07/03 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
英国领先的鞋类零售商和顶级品牌的官方零售商:Wynsors
2020/02/17 全球购物
写自荐信的七个技巧
2013/10/15 职场文书
银行青年文明号事迹材料
2014/05/31 职场文书
三严三实学习心得体会
2014/10/13 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
委托函范文
2015/01/29 职场文书
前台接待员岗位职责
2015/04/15 职场文书
就业意向书范本
2015/05/11 职场文书
阿里云Nginx配置https实现域名访问项目(图文教程)
2021/03/31 Servers
详解Redis实现限流的三种方式
2021/04/27 Redis