原则

• （对内）分层原则：正交原则
  • html 结构层分离 css 样式层分离 js 行为层分离
  • 例如：使用$div.addClass,不使用$div.show
• （对外）封装原则：面向接口原则
  • 用户如何调用？
    • 先想好输入，输出，在写中间逻辑
    • 能不用接口最好不用接口

步骤

需求,UI,代码,测试

思路

如果需要渲染不知道长度的东西，可以考虑递归。

VUE组件

vue组件主要由prop、event、slot着三部分构成其中

• prop 定义了这个组件有哪些可配置的属性,prop最好使用对象的写法
  • default 组件的默认值
  • validator函数 对值进行自定义验证
• slot，它可以分发组件的内容
  • 当需要多个插槽时，会用到具名 slot
• 自定义事件 event

export default {
    methods: {
      handleClick (event) {
        this.$emit('on-click', event);
      }
    }
  }

通过 $emit，就可以触发自定义的事件 on-click ，在父级通过 @on-click 来监听：

<i-button @on-click="handleClick"></i-button>

也可以直接在父级声明，但为了区分原生事件和自定义事件，要用到事件修饰符 .native，所以上面的示例也可以这样写：

<i-button @click.native="handleClick"></i-button>

Vue组件之间的通讯

• ref：给元素或组件注册引用信息；
• $parent / $children：访问父 / 子实例。
• Vuex
• Bus (opens new window)
  • bus的本体就是一个单独的Vue实例，然后用$emit， $on， $off 分别来分发、监听、取消监听事件
• 依赖注入 跨级组件间的通信
• $dispatch 和 $broadcast 方法 (2.x已经被弃用 官方给出的代替方案是Bus (opens new window)或者自己实现一个)
• 详细使用 (opens new window)

注意：

• vue组件的事件不会冒泡
• 属性不能以"data-"开头