鄢-亚搏体育手机版下载-亚搏体育网站-亚搏体育苹果下载

前语

《vue 根底》系列是再次回炉 vue 记的笔记,除了官网那部鄢-亚搏体育手机版下载-亚搏体育网站-亚搏体育苹果下载分知识点外,还会参加自己的一些了解。(里边会有部分和官网相同的案牍,有经历的同学择感兴趣的阅览)

extends选项/组合 类别下的选项特点之一,而不是 Vue.extend 大局 API,这个事前说下标签11,避免概念上有个混杂。

代码复用

现在的前端有个非常重要的思维,便是“组件化”,关于代码层面便是终究 html、css、js 这些元素都会被挪到一起来完成一个标签5较为完好的功用。就比方 element-ui ,若你想完成一个分页栏,直接拿 就能够搞定。

假如你要对数据进行过滤处理、标签11经过标签有些特别功用,对应能够自界说一鄢-亚搏体育手机版下载-亚搏体育网站-亚搏体育苹果下载些过滤鄢-亚搏体育手机版下载-亚搏体育网站-亚搏体育苹果下载器、指令。

这些举例标签17都有个一起的特性便是 代码复用 。那些随处可见的优点就不说了。这儿提个问题,怎样在 vue 里只针对 js 功用进行复用标签17呢?(可能讲标签3的有些限制)

答案便是 extends ,一个普普通通的特点,可我在掉了一撮头发后才用到。

extends

类型但是:Object | Function

答应声明扩展另一个组件(能够鄢-亚搏体育手机版下载-亚搏体育网站-亚搏体育苹果下载是一个简略的选项目标或结构函数),而无需运用 Vue.标签10extend。这首要是为了便于扩展单文件组件。这和 mixins 类似。

场景

简略举几个比如


运用在 lifecyc鄢-亚搏体育手机版下载-亚搏体育网站-亚搏体育苹果下载le 生命周期上

有一些需求(例如,操控 mint-ui loadmore 组件的高度),当元素挂载到 dom 节点后,需求操控页面某些区域的固定高度。

曾经咱们标签5是这样做的,一切需求操控高度的页面都有这段类似的代码。

那当运用了 extends 后,就能够简化成:

运用 extends 调用封装办法 heightControl ,哪个 vue 模块要用就增加这行代码就行了 :

heightControl标签14 便是本来的 mounted 中悉数的界说:


简化 methods 办法

再举一个比如,咱们会有注册、忘掉暗码有获取短信的功用,他们在接口相同,参数类似。那么就会在两个页面上有类似度标签17 99% 的模板化代码。

那当运用了 extends 后,就能够简化成:

重写 methods 特点,将共用获取短信的办法列出,完成一个鄢-亚搏体育手机版下载-亚搏体育网站-亚搏体育苹果下载较为共用化的发送短信功用:

总结

经过这两个比如,说了下 extends 简略的场景运用,比如虽少,但的确是我平常优化后觉得很有用的实践。信任经过该特点能让代码的复用性更高,减轻今后的工作量。

假如你能 get 到其间的点,并觉得此文有协助,就共享给其他同学吧。

关于我

一位“前端工程师”,鄢-亚搏体育手机版下载-亚搏体育网站-亚搏体育苹果下载乐于实践,并共享前端开发经历。

假如有问题或许主意,欢迎各位谈论留言,愿我们一起进步。

重视【前端雨爸】,查阅更多前端技能心得。

Write a Comment

电子邮件地址不会被公开。 必填项已用 *标注