专栏名称: OSC开源社区
OSChina 开源中国 官方微信账号
目录
相关文章推荐
程序猿  ·  什么是真正的程序员? ·  3 天前  
OSC开源社区  ·  淘宝程序员是不是没活硬整? ·  1 周前  
程序员的那些事  ·  趣图:“AI 会取代你们的岗位啊!” ·  1 周前  
程序猿  ·  改变世界的17个方程式 ·  1 周前  
OSC开源社区  ·  苹果有开源(下):Swift ... ·  1 周前  
51好读  ›  专栏  ›  OSC开源社区

合格前端系列系列第二弹- Vue 组件开发续篇

OSC开源社区  · 公众号  · 程序员  · 2017-05-10 08:22

正文

点击图片报名上海、南京源创会 #


之前我写过一篇有关vue组件开发的文章《一入前端深似海,从此红尘是路人系列第八弹之浅析Vue组件开发》,这次将是对上次的一次拓展。其中也会有vue部分源码的解析,接下来直接上正文吧。


一、父子组件之间的通信

总所周知,如果进行组件开发的话,必定存在组件通信的问题,具体通信如何进行的呢,我借用一张vue官网的图


图中很明显可以看到,Parent组件通过props向下传递数据(props down),Child组件通过events向上传递消息(events up)。具体通信机制,请转链接 https://vuejs.org/v2/guide/components.html。那么如果不是父子组件关系,而是slot节点之间的关系,又该如何进行通信呢。下面的内容会带着大家一步一步解惑。



二、组件的开发

接下里的例子我将模拟element-ui中的dropdown下拉菜单组件,对组件开发进行详细的解剖。进行开发前我们先看一下element-ui中的dropdown组件实现了哪些功能(具体功能转链接http://element.eleme.io/#/zh-CN/component/dropdown),这里我们挑选一些不会涉及到调用其他element-ui组件的功能,接下来,希望小伙伴们跟着我一起慢慢实现一个属于自己的element-ui组件吧。


1、组件设计



如上图所示,整个dropdown组件分成了三个组件模块,最外层的dropdown,下拉菜单dropdown-menu,以及下拉列表dropdown-list。至于为何这样设计,主要是为了该组件的cover范围可以大,可以适用各种场景。


我们先看下实现功能后每个组件对应的template内容


a、dropdown组件

.v-dropdown {

    display: inline-block;

    position: relative;

    color: #48576a;

    font-size: 14px;

}