之前自己写的项目，根本就不叫组件，业务耦合性非常高，复用性极低。
即使使用了组件，也是element-ui组件库中的组件，很少使用原生vue语法（不严格地讲）。
可以说是在应用层的最高层开发

高层：element-ui
中层：vue.js
底层：javascript

很是不舒服，自己学习javascript比较多，学习初期对于vue语法也有粗浅的涉猎，但是由于时间较长未学习，未能将二者很好地联系起来，出于对于React JSX语法的恐惧，也出于复习vue，刚好对真正的组件开发一探究竟。

因为我想，如果后续自己能开发一个组件库，自己开发非常便利，技术也是飞跃性地提升，虽然这并不容易。

Alert警告组件。

index.js

import Alert from './src/main'

Alert.install = function(Vue) {

     Vue.component(Alert.name,Alert);

};

export default Alert;

main.vue

<template>

     <transition name="el-alert-fade">

          <div

               class="el-alert"

               :class="[typeClass,center ?'is-center':'']"

               v-show="visible"

               role="alert"

          >
...

有2句比较困惑：
:class="[typeClass,center ?'is-center':'']"
:class="{ 'is-customed': closeText !== '', 'el-icon-close': closeText === '' }"

1.：class什么意思？不是已经有class了吗？会push进classItem吗？

v-bin:class可以与普通的class属性共存。

2.'[]'和'{}'什么意思，标签也支持模板语法吗？

可以把数组传给一个v-bind:class.默认class和可选class.

也可以绑定对象。

https://cn.vuejs.org/v2/guide/class-and-style.html

3.props干嘛的?

export default {

     name: 'ElAlert',

     props: {

       title: {

         type: String,

         default: '',

         required: true

       },

...

组件实例作用域是孤立的。需要使用props下发数据到子组件，这也是单向数据流。

此处下发了众多属性到子组件。

4. this.$emit('close');

vue使用$emit和$on来进行兄弟组件间数据传输，$emit是producer，$on是consumer。

5.计算属性

computed: {

       typeClass() {

         return `el-alert--${ this.type }`;

       },

       iconClass() {

         return TYPE_CLASSES_MAP[this.type] || 'el-icon-info';

       },

       isBigIcon() {

         return this.description || this.$slots.default ? 'is-big' : '';

       },

       isBoldTitle() {

         return this.description || this.$slots.default ? 'is-bold' : '';

       }

}

与上面的html标签的v-bind:class协同工作.

6.实地考察

http://element.eleme.io/#/zh-CN/component/alert

简单了解了下element-ui组件设计思路，其余组件应该也是类似的。

7.总结。

所谓组件，相当于类，你可以new一个新的实例，每个实例分配新的内存空间，每个实例都是独立的，所以你可以单独的去激活实例功能，而不影响其他组件。

通俗来讲，组件就是提供了一些默认激活，未激活但是可以选择性激活的功能，可以根据自己的实际业务场景去选择，这里的组件指的是通用组件。

也就是UI库中的组件，而不是一个业务耦合严重的vue单文件组件。

例如alert警告的关闭，icon，居中，辅助性文字等。

That's it.

期待和大家交流，共同进步，欢迎大家加入我创建的与前端开发密切相关的技术讨论小组：

• SegmentFault技术圈:ES新规范语法糖
• SegmentFault专栏：趁你还年轻，做个优秀的前端工程师
• 知乎专栏：趁你还年轻，做个优秀的前端工程师
• Github博客: 趁你还年轻233的个人博客
  
• 前端开发交流群：660634678

努力成为优秀前端工程师！