关于构成vue组件元素的思考

在我们开发中，我经常需要对页面功能进行不同的拆分，可以分为容器组件和展示组件。容器组件包含一个或多个展示组件。

一个展示组件包含了模板、脚本以及样式的代码。常见的封装：

1、用户改变数据源使页面呈现不同的状态。

<div>
    <my-component data="我是父组件传入子组件的数据"></my-component>
</div>

2、自定义封装，开放一部分slot给父组件，可以使其定制化。

<div>
    <my-component data="我是父组件传入子组件的数据">
        <template slot="customize">
            <span>这是定制化的数据</span>
        </template>
    </my-component>
</div>

 myComponent 组件中

<div class="container">
    <span>{{ data }}</span>
    <slot name="customize"></slot>
<div>

由此我们可以总结一个组件构成的三要素：prop、slot、event

1、prop可以配置组件有哪些功能，props最好用对象写法，可以针对每个属性值进行默认赋值、设置类型和类型判断。

比如我们封装一个button组件，定义了两个属性：尺寸 size 和 是否禁用 disabled。其中 size 使用 validator 进行了值的自定义验证，也就是说，从父级传入的 size，它的值必须是指定的 small、large、default 中的一个，默认值是 default。

<template>
  <button :class="'i-button-size' + size" :disabled="disabled"></button>
</template>
<script>
  // 判断参数是否是其中之一
  function oneOf (value, validList) {
    for (let i = 0; i < validList.length; i++) {
      if (value === validList[i]) {
        return true;
      }
    }
    return false;
  }

  export default {
    props: {
      size: {
        validator (value) {
          return oneOf(value, ['small', 'large', 'default']);
        },
        default: 'default'
      },
      disabled: {
        type: Boolean,
        default: false
      }
    }
  }
</script>

父组件使用

<i-button size="large" id="btn1" class="btn-submit"></i-button>
<i-button disabled></i-button>

2、slot插槽，比如我们想给button组件添加icon和文字，就可以使用slot进行配置，将上面button改造一下

<button :class="'i-button-size' + size" :disabled="disabled">
   <slot name="icon"></slot>
   <slot></slot>
 </button>

父组件使用

 

<i-button>
  <i slot="icon">我是图标</i>
  按钮
</i-button>

3、event自定义事件

<button :class="'i-button-size' + size" :disabled="disabled" @click="handleClick">
   <slot name="icon"></slot>
   <slot></slot>
</button>

//methods里面添加
handleClick (event) {
   this.$emit('on-click', event);
}

父组件使用

<i-button @on-click="handleClick">
  <i slot="icon">我是图标</i>
  按钮
</i-button>

我们也可以在父组件直接添加点击事件，使用native修饰符区分原生事件和自定义事件。

<i-button @click.native="handleClick">
  <i slot="icon">我是图标</i>
  按钮
</i-button>

掌握了 Vue.js 组件的这三个 API 后，剩下的便是程序的设计。在组件开发中，最难的环节应当是解耦组件的交互逻辑，尽量把复杂的逻辑分发到不同的子组件中，然后彼此建立联系，在这其中，计算属性（computed）和混合（mixins）是两个重要的技术点，合理利用，就能发挥出 Vue.js 语言的最大特点：把状态（数据）的维护交给 Vue.js 处理，我们只专注在交互上。

 

参考：掘金小册vue组件精讲