Vue ui组件封装

开发过程中 Vue 的组件主要分为三类https://blog.csdn.net/weixin_44260504/article/details/89555563

• 页面组件。由 vue-router 指向的组件，通常是在 router.js 中路由指向的组件。主要承载当前页面的 html 结构，通常还包括数据获取，数据整理，数据可视化等常规的前端业务，整个组件文件较大，但是一般不包括 props 和自定义事件等，因为页面组件作为路由的渲染，一般不可复用，不对外提供接口。

• 业务组件。通常是在页面组件中引入，针对当前项目，是对页面中某个部分进行拆分出来编写的，具有特定的业务，如获取数据，整理数据等等还可以依赖外部库，如 axios、echarts、vuex 等，业务组件可能会被多个页面复用，也可能只适用某个页面，如果需要复用，需要抽象出一定的外部接口供页面组件调用。

• 独立组件。不包含业务，具有特定功能的基础组件，比如日期选择器，按钮，模态框等等，作为项目的基础组件，需要对 api 进行高强度的抽象，以通过不同的配置实现不同的功能。比如 element-ui，iView 等，包含了很多基础的 UI 组件。
  这类组件的开发最主要的是对 api 的设计和提供的功能进行具体的开发，要保证兼容性和通用性，还有性能，在不依赖外部库的情况下，各组件的通信等等会比较复杂。

组件封装(独立组件)

通过vue-cli搭建的项目，目录下都有components目录，自定义组件一般放在这里。

image.png

编写一个.vue文件和.js文件
index.vue内容如下：

<template>
  <div class="test_button">
    <button>
      hahaha
    </button>
  </div>
</template>
 
<script>
export default {
  name: 'TestButton' // 注意这里的name命名，就是你以后封装好后使用的组件名
}
</script>

<style lang="scss" scoped>
.test_button {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: burlywood;
}
</style>

index.js内容如下：

import TestButton from "./index.vue";
const testButton = {
  install: function(Vue) {
    // Vue.component()是用来注册全局组件的
    Vue.component(TestButton.name, TestButton);
  }
};
export default testButton;

组件编写完成后，在main.js中引入 image.png

这种方式引入的是全局组件。

• 独立组件的开发最主要的就是对提供的外部接口进行高度抽象，能通过配置实现需要的功能。提供外部接口的方式主要是通过组件之间通信的方式，如props,$emit和自定义事件。这类组件之间代码是完全独立的。