脚本宝典收集整理的这篇文章主要介绍了高级 Vue 组件模式 (1)，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

写在前头

去年，曾经阅读过一系列关于高级 react 组件模式的文章，今年上半年，又抽空陆陆续续地翻译了一系列关于高级 Angular 组件模式的文章，碰巧最近接手了一个公司项目，前端这块的技术栈是 vue。我对于 vue 本身还是比较熟悉的，不过大多都是一些很简单的个人项目，在构建相对比较复杂的应用中缺乏实践经验，就想着也搜搜类似题材的文章，涨涨知识。结果似乎没有找到（其实也是有一些的，只不过不是和 react 和 angular 对比来写的），不如就按照 react 和 angular 这两个系列文章的思路，使用 vue 来亲自实现一次吧。

由于三个框架的设计思想、语法都有比较大的区别，所以在实现过程中，均使用更符合 vue 风格的方式去解决问题，同时也提供一些对比，供读者参考，如果观点有误，还望指正。

01 实现一个 toggle 组件

这个系列的文章的第一篇，都会从实现一个最简单的 toggle 组件开始。

在 Vue 中，我们通过 data 来声明一个 checked 属性，这个属性所控制的状态代表组件本身的开关状态，这个状态会传递给负责渲染开关变换逻辑的 swITch 组件中，关于 switch 组件，这里不做过多介绍，你把它当作一个私有组件即可，其内部实现与该篇文章没有太大的关联。同时这个组件还拥有一个 on 属性，用来初始化 checked 的状态值。

通过在 switch 组件注册原生 click 事件，toggle 组件还会触发一个 toggled 事件，在 App 组件中，我们会监听这个事件，并将其回传的值打印到控制台中。你可以下面的链接来看看这个组件的实现代码以及演示：

• sandbox: 在线演示
• github: part-1

总结

toggle组件的实现是一个很典型的利用单向数据流作为数据源的简单组件：

• on 是单向数据源，checked 代表组件内部的开关状态
• 通过触发 toggle 事件，将 checked 状态的变化传递给父组件

目录

github gist点击预览

欢迎关注公众号 全栈101，只谈技术，不谈人生

脚本宝典总结

以上是脚本宝典为你收集整理的高级 Vue 组件模式 (1)全部内容，希望文章能够帮你解决高级 Vue 组件模式 (1)所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。