标签：Vue 封装 Wrong props 组件 Wise Vuex

https://www.cnblogs.com/wisewrong/p/6834270.html

 

 

Talk is cheap. Show me your code

Wise.Wrong

不懂交互的前端不是好全栈

• 博客园
• 首页
• 新随笔
• 联系
• 管理

随笔 - 72 文章 - 0 评论 - 349

Vue 爬坑之路（九）—— 用正确的姿势封装组件

 

迄今为止做的最大的 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 标签: vue, 组件, vuex, props 好文要顶 关注我 收藏该文   Wise.Wrong
关注 - 7
粉丝 - 695     +加关注 5 0       « 上一篇：针对单个 js 文件禁用 ESLint 语法校验
» 下一篇：Node.js 蚕食计划（一）—— 模块化编程 posted @ 2017-07-25 19:12 Wise.Wrong 阅读(12044) 评论(5) 编辑 收藏  
评论列表     回复引用 #1楼 2017-07-27 14:47 chrwwmm   你好，请问Vue爬坑之路系列文章源码的github地址是什么？ 支持(0)反对(0)   回复引用 #2楼[楼主] 2017-07-27 14:57 Wise.Wrong   @ chrwwmm
没有源码。。。都是即时写的。。。
不过我正在整理一个 vue 的开源项目，做好之后可以发出来做个参考~ 支持(1)反对(0)   回复引用 #3楼 2017-11-13 13:34 abcwt112   那么...被多层封装的组件,要在最外层处理事件的话只能内层组件一层一层emit出来? 一层层@事件 ? 支持(0)反对(0)   回复引用 #4楼[楼主] 2017-11-13 13:46 Wise.Wrong   @ abcwt112
通用组件为了降低耦合性，必须由父组件处理事件。而多件嵌套的时候肯定不会是一堆通用组件吧，这时就要根据实际情况处理事件了。 支持(0)反对(0)   回复引用 #5楼 2017-11-13 19:33 abcwt112   @ WiseWrong
大佬给个QQ好吗...后面有问题好请教 ^_^ 支持(0)反对(0)     刷新评论刷新页面返回顶部 发表评论

昵称：

评论内容：        

 退出 订阅评论

 

[Ctrl+Enter快捷键提交]

  最新新闻：
· 除了裁员，互联网公司又踩了一脚刹车
· 穷得滴滴作响
· 抖音广告泛滥：正盗版游戏扎堆套现，抗癌药成神助攻
· 不看后悔！2019年人工智能行业25大趋势
· 元宵节遇上"超级月亮","最大满月"将现身
» 更多新闻... 昵称：Wise.Wrong
园龄：2年3个月
粉丝：695
关注：7 +加关注

• CSS(8)
• JavaScript(10)
• Node.js(5)
• Vue(12)
• 工作笔记(14)
• 前端面试(5)
• 小程序(4)
• 愚人有语(14)

阅读排行榜

• 1. Vue 爬坑之路（三）—— 使用 vue-router 跳转页面(262950)
• 2. Vue 爬坑之路（六）—— 使用 Vuex + axios 发送请求(149098)
• 3. Vue 爬坑之路（一）—— 使用 vue-cli 搭建项目(121169)
• 4. Vue 爬坑之路（二）—— 组件之间的数据传递(85255)
• 5. Vue 爬坑之路（八）—— 使用 Echarts 创建图表(52362)

    Copyright ©2019 Wise.Wrong

标签：Vue,封装,Wrong,props,组件,Wise,Vuex
来源： https://www.cnblogs.com/sunshinedream/p/10396923.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。