如何写好一个vue组件,老夫的一年经验全在这了【转】 v-bind="$attrs" 和 v-on="$listeners"
如何写好一个vue组件,老夫的一年经验全在这了
一个适用性良好的组件,一种是可配置项很多,另一种就是容易覆写,从而扩展功能
Vue 组件的 API 来自三部分——prop、事件和插槽:
- prop 允许外部环境传递数据给组件
- event 允许从组件内触发外部环境的副作用
- 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集合}
传入一个对象
比如当一个组件有诸多配置项,且当没有传入配置项取用组件内部默认项的时候,为了方便覆写子组件的内部配置项,不妨使用一个对象将配置收集到一起,但是这种做法有两个缺点,谨慎使用
- 不能利用 props 验证对象里面每个的值类型
- 如果你子组件修改了父组件传入的对象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组件,老夫的一年经验全在这了【转】 v-bind="$attrs" 和 v-on="$listeners"的更多相关文章
- 写一个vue组件
写一个vue组件 我下面写的是以.vue结尾的单文件组件的写法,是基于webpack构建的项目.如果还不知道怎么用webpack构建一个vue的工程的,可以移步到vue-cli. 一个完整的vue组件 ...
- Laravel 项目中编写第一个 Vue 组件
和 CSS 框架一样,Laravel 不强制你使用什么 JavaScript 客户端框架,但是开箱对 Vue.js 提供了良好的支持,如果你更熟悉 React 的话,也可以将默认的脚手架代码替换成 R ...
- 自己编写并发布一个Vue组件
自己编写并发布一个Vue组件 1. 几种开源协议的介绍 https://blog.csdn.net/techbirds_bao/article/details/8785413 2.开始编写组件 新建p ...
- 一个 VUE 组件:实现子元素 scroll 父元素容器不跟随滚动(兼容PC、移动端)
介绍 我们经常遇到一种情况.当滑动滚动条区域时,子元素滚动条到底部或顶部时就会触发父级滚动条,父级滚动条同理会继续向上触发,直至body容器.这是浏览器默认的滚动行为. 但是很多情况,我们想要子元素滚 ...
- VUE -- 如何快速的写出一个Vue的icon组件?
伴随着Vue的诞生,它似乎就被人寄予厚望,不仅仅是因为其轻量级的MVVM设计方式,而且其实现了组件化开发模式,所以越来越多的人会拿Vue和AngularJS.React Native做比较.具体关于它 ...
- 利用webpack打包自己的第一个Vue组件库
先说一下这篇文章的诞生原因.我们有一个这样的项目,类似或者说就是一个仪表板-Dashboard,其中的各个部分可能不是一个部门写的……我们需要提供拖拽布局(大小和位置)和展示的能力.要实现这样一个功能 ...
- 如何在一个文件中写多个Vue组件(译-有删改)
原文地址 Writing multiple Vue components in a single file 在一个文件中编写多个组件是React的模式,其中一些文件包含多个组件. 走开发过程中,有些组 ...
- 写了一个vue+antdv的后台管理模板
1,项目简介 写在前面===>这是一个vue+antdv的后台管理模板 项目地址: https://github.com/BaiFangZi/vue-antd-manage 1.1,概述 最 ...
- 【万字长文】从零配置一个vue组件库
简介 本文会从零开始配置一个monorepo类型的组件库,包括规范化配置.打包配置.组件库文档配置及开发一些提升效率的脚本等,monorepo 不熟悉的话这里一句话介绍一下,就是在一个git仓库里包含 ...
随机推荐
- [Xcode 实际操作]九、实用进阶-(24)使用Segue(页面的跳转连接)进行页面跳转并传递参数
目录:[Swift]Xcode实际操作 本文将演示使用Segue(页面的跳转连接)进行页面跳转并传递参数. 参照结合:[Xcode10 实际操作]九.实用进阶-(23)多个Storyboard故事板中 ...
- Integrated Metabolomics and Lipidomics Analyses Reveal Metabolic Reprogramming in Human Glioma with IDH1 Mutation (文献分享一组-黄旭蕾)
题目:Integrated Metabolomics and Lipidomics Analyses Reveal Metabolic Reprogramming in Human Glioma wi ...
- 阿里云物联网 .NET Core 客户端 | CZGL.AliIoTClient:2. IoT 客户端
文档目录: 说明 1. 连接阿里云物联网 2. IoT 客户端 3. 订阅Topic与响应Topic 4. 设备上报属性 4.1 上报位置信息 5. 设置设备属性 6. 设备事件上报 7. 服务调用 ...
- Java之多线程优先级基础
线程得到cpu的给的时间才能运行 有一个同步方法,里面有一个线程进去了,外面A,B俩线程在排队,A优先级比B优先级高,等到同步方法里面的线程出去了, 一定是A先进去; 但是: 因此,仅将高优先级赋予一 ...
- c3p0连接池的简单使用和测试1
- Windows下完全卸载node.js并安装node.js的多版本管理工具nvm-windows
前言 由于高版本的node.js导致gulp执行build命令失败,我需要在Windows下卸载掉已有的node.js并安装一个多版本管理工具nvm-windows,方便切换不同版本的node.js. ...
- PostgreSQL - N''和::bpchar
N''的效果和::bpchar效果类似,都表示定长字符串.比如下边的sql: select n'233' as num; select '233'::bpchar as num; select '23 ...
- python如何永久添加模块搜索路径
win10系统 依次点击:控制面板\系统和安全\系统\高级系统设置\环境变量 找不到的话,直接在设置中搜索 环境变量 也一样 此时上面是用户变量 下面是系统变量 在系统变量中找到PYTHO ...
- 简单的Javascript图片延迟加载库Echo.js
简介: 和 Lazy Load 一样,Echo.js 也是一个用于图像延迟加载 JavaScript.不同的是 Lazy Load 是基于 jQuery 的插件,而 Echo.js 不依赖于 jQue ...
- 存储-InfluxDB
1 TSDB influxDB是一个time series时间序列数据库. 在监控系统的开发中,大体分为采集-存储-可视化三个大类.监控指标有很显著的时间特征数据,一般采用TSDB存储. 在TSDB中 ...