迄今为止做的最大的 Vue 项目终于提交测试,天天加班的日子终于告一段落。。。

在开发过程中,结合 Vue 组件化的特性,开发通用组件是很基础且重要的工作

通用组件必须具备高性能、低耦合的特性

为了满足这些特性,开发的时候有很多需要注意的地方,这里我和大家分享一下我的心得

一、数据从父组件传入

为了解耦,子组件本身就不能生成数据。即使生成了,也只能在组件内部运作,不能传递出去。

父对子传参,就需要用到 props,通常的 props 是这样的:

但是通用组件的的应用场景比较复杂,对 props 传递的参数应该添加一些验证规则

对于通过 props 传入的参数,不建议对其进行操作,因为会同时修改父组件里面的数据

// vue2.5已经针对 props 做出优化,这个问题已经不存在了

如果一定需要有这样的操作,可以这么写:

为什么不直接写 let myData = this.data 呢?

因为直接赋值,并不能解除双向绑定。改变 myData 的时候,会改变 this.data,父组件的 data 也会变

而通过 JSON 转换之后,就能任性的操作了

二、在父组件处理事件

在通用组件中,通常会需要有各种事件,

比如复选框的 change 事件,或者组件中某个按钮的 click 事件

这些事件的处理方法应当尽量放到父组件中,通用组件本身只作为一个中转

这样既降低了耦合性,也保证了通用组件中的数据不被污染

关于 $emit 的具体写法,可以参考《 Vue 爬坑之路(二)—— 组件之间的数据传递》

不过,并不是所有的事件都放到父组件处理

比如组件内部的一些交互行为,或者处理的数据只在组件内部传递,这时候就不需要用 $emit 了

三、记得留一个 slot

一个通用组件,往往不能够完美的适应所有应用场景

所以在封装组件的时候,只需要完成组件 80% 的功能,剩下的 20% 让父组件通过 solt 解决

关于 slot 的具体用法,可以参考我的博客《 Vue 爬坑之路(五)—— 组件进阶 》

上面是一个通用组件,在某些场景中,右侧的按钮是 “处理” 和 “委托”。在另外的场景中,按钮需要换成 “查看” 或者 “删除”

在封装组件的时候,就不用写按钮,只需要在合适的位置留一个 slot,将按钮的位置留出来,然后在父组件写入按钮

开发通用组件的时候,只要不是独立性很高的组件,建议都留一个 slot,即使还没想好用来干什么

四、不要依赖 Vuex

《 Vue 爬坑之路(四)—— 与 Vuex 的第一次接触》

父子组件之间是通过 props 和 自定义事件 来传参,非父子组件通常会采用 Vuex 传参

但是 Vuex 的设计初衷是用来管理组件状态,虽然可以用来传参,但并不推荐

因为 Vuex 类似于一个全局变量,会一直占用内存

在写入数据庞大的 state 的时候,就会产生内存泄露

当页面刷新的时候,Vuex 会初始化,同时也会丢失编辑过的数据

如果刷新页面时需要保留数据,可以通过 url 或者 sessionstorage 保存 id,然后 ajax 请求数据

五、合理运用 scoped 编写 CSS

在编写组件的时候,可以在 <style> 标签中添加 scoped,让标签中的样式只对当前组件生效

但是一味的使用 scoped,肯定会产生大量的重复代码

所以在开发的时候,应该避免在组件中写样式

当全局样式写好之后,再针对每个组件,通过 scoped 属性添加组件样式

Vue 爬坑之路(九)—— 用正确的姿势封装组件的更多相关文章

  1. Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求

    Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...

  2. Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli vue ...

  3. Vue 爬坑之路(十二)—— vue-cli 3.x 搭建项目

    Vue Cli 3 官方文档:https://cli.vuejs.org/zh/guide/ 一.安装 @vue/cli 更新到 3.x 之后,vue-cli 的包名从 vue-cli 改成了 @vu ...

  4. Vue 爬坑之路(十)—— Vue2.5 + Typescript 构建项目

    Typescript 在前端圈已经逐渐普及,Vue 2.5.0 改进了类型声明,使得对 TypeScript 更加友好 不过要想在项目中直接使用 TypeScript  仍然需要对项目进行一些改造 P ...

  5. Vue 爬坑之路—— 使用 Vuex + axios 发送请求

    Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios  ...

  6. vue爬坑之路1-路由跳转全新页面以及二级页面配置

    之前也在网找了一些答案,比较零碎,特此总结下,废话不多说,直接上干货! 路由跳转全新页面 首先在app.vue中先定义router-view,这是主路由. 在router的index.js中引入log ...

  7. Vue 爬坑之路(二)—— 组件之间的数据传递

    Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...

  8. Vue 爬坑之路(四)—— 与 Vuex 的第一次接触

    在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用  props 或者 $emit 等方式 http://www.cnblogs.com/wisewrong/p/62660 ...

  9. Vue 爬坑之路(八)—— 使用 Echarts 创建图表

    在后台管理系统中,图表是一个很普遍的元素.目前常用的图标插件有 charts,  Echarts, highcharts.这次将介绍 Echarts 在 Vue 项目中的应用. 一.安装插件 使用 c ...

随机推荐

  1. 用Python删除本地目录下某一时间点之前创建的所有文件

    因为工作原因,需要定期清理某个文件夹下面创建时间超过1年的所有文件,所以今天集中学习了一下Python对于本地文件及文件夹的操作.网上 这篇文章 简明扼要地整理出最常见的os方法,抄袭如下: os.l ...

  2. C++反汇编第五讲,认识多重继承,菱形继承的内存结构,以及反汇编中的表现形式.

    C++反汇编第五讲,认识多重继承,菱形继承的内存结构,以及反汇编中的表现形式. 目录: 1.多重继承在内存中的表现形式 多重继承在汇编中的表现形式 2.菱形继承 普通的菱形继承 虚继承 汇编中的表现形 ...

  3. Jsoup(一)Jsoup详解(官方)

    一.Jsoup概述 1.1.简介     jsoup 是一款Java 的HTML解析器,可直接解析某个URL地址.HTML文本内容.它提供了一套非常省力的API, 可通过DOM,CSS以及类似于jQu ...

  4. 使用邮件激活授权/ LightningChart license

    在无网络连接的情况下,可以采用邮件的方式激活授权. 先打开License Manager,然后选 Activate/Deactivate via email, 如下图所示: 此邮件将自动发送到 lic ...

  5. Linux安装Nginx以及简单理解

    1.Nginx简单介绍 ①.Nginx:一个高性能的HTTP和反向代理服务器,高并发处理很不错. ②.反向代理:在计算机世界里,由于单个服务器的处理客户端(用户)请求能力有一个极限,当用户的接入请求蜂 ...

  6. Linux网络编程--wireshark分析TCP包头的格式

    摘要:     本文简介了TCP面向连接理论知识,具体讲述了TCP报文各个字段含义.并从Wireshark俘获分组中选取TCP连接建立相关报文段进行分析. 一.概述     TCP是面向连接的可靠传输 ...

  7. Ubuntu下关闭防火墙

    默认情况下ubuntu无firewall,除非你自己安装了,怎么装的就怎么删呗. . 假设是已启用的自备的iptables 删了即可了 sudo apt-get remove iptables.

  8. 基于Office 365的随需应变业务应用平台

    作者:陈希章 发表于 2017年9月7日 这是我去年10月底在微软技术大会(Microsoft Ignite 2016) 上面的演讲主题,承蒙大家抬爱,也沾了前一场明星讲师的光,我记得会场几乎是满座. ...

  9. Array的基本操作

    准备饿补基础技术,先来个数组的总结. 1 .合并操作    concat :   var C = A.concat(B);    用A数组合并B数组,生成新的C数组.      循环插入        ...

  10. mysql默认安装目录说明

    MySQL安装完成后不象SQL Server默认安装在一个目录,它的数据库文件.配置文件和命令文件分别在不同的目录,了解这些目录非常重要,尤其对于Linux的初学者,因为 Linux本身的目录结构就比 ...