原则

  • (对内)分层原则:正交原则
    • 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
    • bus的本体就是一个单独的Vue实例,然后用$emit, $on, $off 分别来分发、监听、取消监听事件
  • 依赖注入 跨级组件间的通信
  • $dispatch 和 $broadcast 方法 (2.x已经被弃用 官方给出的代替方案是Bus或者自己实现一个)
  • 详细使用

注意:

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