ui组件二次封装（vue）

组件二次封装的意义

• 保证一个系统中ui风格和功能的一致性
• 便于维护

从属性、事件、插槽、ref这几方面考虑

• 属性和事件的处理：ui组件上绑定$attrs（v-model本质也是一个属性加一个事件，所以也在其列）

在自定义组件中打印$attrs：父组件传递过来的所有属性和事件 - 自定义组件本身定义的属性和事件。

• 插槽的处理：循环$slots设置ui组件插槽，并定义同名自定义组件插槽

在自定义组件中打印$slots:父组件中设置的插槽对象（键值对）

• ref的处理（如果在自定义组件上使用ref，大概率是想用ui组件里的方法）

将ui组件实例的所有属性都放到自定义组件上

完整例子

子组件：

mounted() {
  for (const key in this.$refs.elInput) {
    this[key] = this.$refs.elInput[key]
  }
}
----------------------------------------------------
父组件：

  

data() {
  return {
    inputVal: '123'
  }
},
mounted() {
  this.$refs.wrapRef.focus()
}