高级 Vue 组件模式 (1)
2018-10-20 00:00
288 查看
写在前头
去年,曾经阅读过一系列关于高级 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 组件中,我们会监听这个事件,并将其回传的值打印到控制台中。你可以下面的链接来看看这个组件的实现代码以及演示:
总结
toggle
组件的实现是一个很典型的利用单向数据流作为数据源的简单组件:
-
on
是单向数据源,checked
代表组件内部的开关状态 - 通过触发
toggle
事件,将checked
状态的变化传递给父组件
目录
欢迎关注公众号 全栈101,只谈技术,不谈人生
相关文章推荐
- 高级 Vue 组件模式 (3)
- 高级 Vue 组件模式 (2)
- 高级 Vue 组件模式 (7)
- 高级 Vue 组件模式 (8)
- 高级 Vue 组件模式 (9)
- 高级 Vue 组件模式 (6)
- 高级 Vue 组件模式 (5)
- 高级 Vue 组件模式 (4)
- 在Vue.js中,在scoped模式下如何修改子组件内部标签的样式
- vue 组件高级用法实例详解
- Vue基础精讲 —— Vue的组件之组件的定义、继承、自定义双向绑定、高级属性
- vue非父子组件间传值(发布订阅模式)
- Vue 组件5 高级异步组件
- Vue---slot--->>高级--组件嵌套
- vue组件详解(五)——组件高级用法
- vue非父子组件传值之发布订阅模式
- vue-router菜鸟进阶!(路由组件传参 vs H5 History模式)
- 解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法
- vue学习18:非父子组件间的传值(bus/总线/发布订阅者模式/观擦者模式)
- vue-class-component 以class的模式写vue组件