Vue组件化（一）| 小册免费学

本节内容以技术铺垫为主，如果你对这里的内容非常自信可以跳到下一节，当然也可以帮我找找错

必要性

随着Vue在国内市场的占有率越来越高，组件库同时也火了起来，很多公司内部也为了适应其自身业务而开始开发其自有的组件库，我们现在使用的Element UI（饿了么）、Nut UI（京东）等组件库都是大厂开源出来的组件库。与此同时，拥有组件库开发经验也已经成为了我们在应聘面试中的加分项。

组件库中的组件开发其实给跟我们平常开发组件本质是相同的，只不过我们需要尽可能地考虑到组件的复用性，使组件可以面对多种情况下的业务需求，而且组件库不能和业务耦合，应该和业务完全脱离，即使切换另一种业务也可以使用。

基础API

组件的开发脱离不开prop、slot和event这三个API，此外还要考虑组件之间的通信，比如form和form-item、checkbox和checkbox-group等，他们之间其实是有联系的

prop

prop在我们平常的开发任务中也是经常使用的一个API，用于子组件接受父组件传递的参数，尽管日常使用，但是还是有人在规范性等方面用得并不是很好。

抛弃数组写法：虽然支持数组写法，但是官方都不推荐的数组写方法就扔掉吧

// 摒弃吧
// props: ['status']
// 至少也这样吧
props: {
    status: String
    // 等同于
    // status: {
    //     type: String
    // }
}
复制代码

键值的写法只是提供了类型限制，除此之外，prop还有其他的属性，比如必填项以及内容验证等；validator的值是一个函数，可以将当前prop接受的值传递给函数，返回值如果是一个失败类型的值就会在控制台抛出异常

下面的验证规则限制了status必须是'success', 'warning', 'error'中的一个

props: {
  status: {
    type: String,
    validator: function(prop) {
      return [
        'success',
        'warning',
        'error'
      ].indexOf(prop) >= 0
    },
    default: 'success',
    required: true,
    // 一般默认值不会和必填项同时出现
  }
}
复制代码

然后我在使用组件时传入一个错误的值

<message status="warning1" />
复制代码

此外还有一点，子组件不能直接修改接收的prop值

slot

我理解的slot作用就是在子组件中插入父组件的内容，子组件在定义时提供一个插槽，父组件在使用子组件时可以向插槽中插入内容。相当于插座和插头，下面这张图类似于具名插槽，父组件使用的插槽名和子组件中的插槽名不匹配，就无法使用

普通的插槽很简单，在子组件中声明插槽，父组件直接添加内容即可，插槽可以设置默认内容，当父组件没有内容传进来时，就会使用默认内容，类似于prop的default属性

<!-- 父组件 -->
<message>
  我是父组件的内容
</message>
<!-- 子组件 -->
<div>
    接受插槽：
    <slot>后备内容</slot>
</div>
复制代码

在上面我们提到了具名插槽，其实就是为了有多个插槽内容时区分内容。使用方法也很简单，在子组件声明slot时添加name属性即可，父组件在使用时添加v-slot:[name]属性（原来是slot="name"，已废弃但没有删除，现阶段这样用也可以）

<!-- 父组件 -->
<message status="warning">
  <template v-slot:header>我是父组件的头部内容</template>
  <template v-slot:footer>我是父组件的底部内容</template>
</message>
<!-- 子组件 -->
<div>
  头部插槽：
  <slot name="header"></slot>
  <br />
  底部插槽：
  <slot name="footer"></slot>
</div>
复制代码

不添加name属性时，默认会赋值name="default"，父组件在使用时不添加v-slot属性默认就是v-slot:default，所以普通插槽也相当于具名插槽，只是默认名。下面两种用法是一样的

<message status="warning">
  <template v-slot:default>我是父组件的内容</template>
</message>
<message status="warning">
  <template>我是父组件的内容</template>
</message>
复制代码

还有一种作用域插槽，用简单的话来说就是，在父组件中使用子组件的数据，这里的作用域也就是指的父组件接收子组件作用域

子组件在声明插槽时绑定一个变量，父组件在使用插槽时使用v-slot="props"接受这个变量（原来是slot-scope，同样已废弃），然后使用变量我们继续使用上面的例子稍加改造

<!-- 父组件 -->
<message status="warning">
  <template v-slot:header="sonData">{{sonData.user.name}}今年{{sonData.user.age}}岁了</template>
  <template v-slot:footer>我是父组件的底部内容</template>
</message>
<!-- 子组件 -->
<div>
  头部插槽：
  <slot name="header" :user="user"></slot>
  <br />
  底部插槽：
  <slot name="footer"></slot>
</div>
复制代码

v-slot指令可以缩写为#，比如v-slot:header可以缩写为#header，默认插槽不可以简写，但是你可以使用#default

event

事件这一块内容虽然很简单，但说起来比较琐碎，看文档吧😂

此外你还需要了解组件之间的通信，组件之间的通讯大致有ABCD这几种情况（大体列一下，不展开细说了）

AB之间父子关系，AC和AD时祖先和后代的关系，CD之间是兄弟关系

• props/$emit，用于父子之间通信
• on/on/on/emit，可以在任意组件之间通信
• children/children/children/parent，可用于父子组件
• $ref，通过标记来获取组件实例
• attrs/attrs/attrs/listeners，attrs包含了父作用域中不被 prop 所识别的属性，listeners包含了父作用域中的 (不含 .native 修饰器的) 事件监听器
• provide/inject，可以在祖孙之间传递数据