如何构建出色的Vue组件？
极客时间编辑部
讲述：杜力大小：1.34M时长：02:57
一般情况下，很少有开发人员在上手编写 Vue 组件时，就考虑到将组件开源化的问题。大部分开发者都是为了自己的项目编写组件，在某些场景下决定通过编写组件的方式处理问题。
但是另一方面，由于大部分组件都是从某个特定场景开始逐步演化出来的，因此，许多组件在 Vue 生态系统中表现得并不“出色”。
ZenDev，LLC（前端咨询和培训公司）的总裁兼首席技术官凯文·巴尔（Kevin Ball）介绍了构建优秀 Vue 组件的最佳实践。
1. 实现 v-model 兼容性
某些组件主要是为表单字段所设计的，包括搜索自动完成、日期选择字段，或是为简单的字段添加额外的功能，使组件的使用者能够添加数据属性。为了使所设计的组件符合使用标准，最重要的一种方式就是支持 v-model。
根据 Vue 组件开发指南，实现组件的 v-model 本质上只需要传递一个 value 属性，并提供一个 input 事件处理器。
2. 对事件透明
为了支持 v-model，组件必须实现 input 事件。原生的事件会基于 HTML 元素进行冒泡，而 Vue 的事件处理默认不会产生冒泡行为。Vue 为开发者提供了一种以编程方式访问某个组件的事件监听者的功能，因此，可以将监听方法赋予给适当的对象。
3. 为恰当的元素赋予属性
在默认情况下，Vue 会识别出添加在组件上的属性，并将其应用在组件的根元素上。这种行为在大部分情况下符合开发者的期望，但是也有例外。比如 textarea 封装组件，更自然的处理方式是将属性赋予 textare 本身，而不是 div 元素。为了实现这一点，开发者需要让组件不使用默认的方式添加属性（通过 $attrs 对象直接为目标元素添加属性）。
4. 拥抱浏览器标准，实现键盘导航功能
在 Web 的开发过程中，最容易被忽略的部分就是页面的可访问性和键盘导航功能。本质上说，这就意味着你需要确保组件符合浏览器标准，可以使用 tab 键选择表单字段，通常也可以使用回车键激活某个按钮或链接。
5. 优先选择事件，而不是回调
在组件与父组件进行数据通信以及用户交互时，通常有两种选择，一是在 props 中添加回调函数，二是使用事件。由于 Vue 的自定义事件不会像原生的浏览器事件一样产生冒泡，因此这两种选择在功能上是一致的。但是从组件重用性的角度来说，巴尔优先推荐事件而不是回调。
6. 限制组件内样式的使用
巴尔建议，如果某些 CSS 在结构上对于组件来说不是必需的（例如 color，border，shadow 等等），则应该从组件文件中去除，或是至少能够关闭这些样式。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
该免费文章来自《极客视点》，如需阅读全部文章，
请先领取课程
请先领取课程
免费领取
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
精选留言
由作者筛选后的优质留言将会公开显示，欢迎踊跃留言。
收起评论