读掘金小册组件精讲总结1

Posted 2021-02-01 gggwf

1.组件分类

（1）由 vue-router 产生的每个页面，它本质上也是一个组件（.vue），主要承载当前页面的 html 结构，会包含数据获取、数据整理、数据可视化等常规业务。整个文件相对较大，但一般不会有 props 选项和 自定义事件，因为它作为路由的渲染，不会被复用，因此也不会对外提供接口。

（2）不包含业务，独立、具体功能的基础组件，比如日期选择器、登录注册弹窗、toast等。这类组件作为项目的基础控件，会被大量使用，因此组件的 API 进行过高强度的抽象，可以通过不同配置实现不同的功能。

（3）介于第一类第二类之间的业务组件，是只会在当前项目中用到的。

2.组件的三个api：prop，event，slot

props 最好用对象的写法，这样可以针对每个属性设置类型、默认值或自定义校验属性的值。

自定义事件event

<template>
  <button @click="handleClick">
    <slot></slot>
  </button>
</template>
<script>
  export default {
    methods: {
      handleClick (event) {
        this.$emit(‘on-click‘, event);
      }
    }
  }
</script>
<i-button @on-click="handleClick"></i-button>

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

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

如果不写 .native 修饰符，那上面的 @click 就是自定义事件 click，而非原生事件 click，但我们在组件内只触发了 on-click 事件，而不是 click，所以直接写 @click 会监听不到。

 

插槽 slot，知道具名slot就行了。