開發(fā)過程中 Vue 的組件主要分為三類https://blog.csdn.net/weixin_44260504/article/details/89555563

• 頁面組件。由 vue-router 指向的組件，通常是在 router.js 中路由指向的組件。主要承載當(dāng)前頁面的 html 結(jié)構(gòu)，通常還包括數(shù)據(jù)獲取，數(shù)據(jù)整理，數(shù)據(jù)可視化等常規(guī)的前端業(yè)務(wù)，整個(gè)組件文件較大，但是一般不包括 props 和自定義事件等，因?yàn)轫撁娼M件作為路由的渲染，一般不可復(fù)用，不對(duì)外提供接口。

• 業(yè)務(wù)組件。通常是在頁面組件中引入，針對(duì)當(dāng)前項(xiàng)目，是對(duì)頁面中某個(gè)部分進(jìn)行拆分出來編寫的，具有特定的業(yè)務(wù)，如獲取數(shù)據(jù)，整理數(shù)據(jù)等等還可以依賴外部庫，如 axios、echarts、vuex 等，業(yè)務(wù)組件可能會(huì)被多個(gè)頁面復(fù)用，也可能只適用某個(gè)頁面，如果需要復(fù)用，需要抽象出一定的外部接口供頁面組件調(diào)用。

• 獨(dú)立組件。不包含業(yè)務(wù)，具有特定功能的基礎(chǔ)組件，比如日期選擇器，按鈕，模態(tài)框等等，作為項(xiàng)目的基礎(chǔ)組件，需要對(duì) api 進(jìn)行高強(qiáng)度的抽象，以通過不同的配置實(shí)現(xiàn)不同的功能。比如 element-ui，iView 等，包含了很多基礎(chǔ)的 UI 組件。
  這類組件的開發(fā)最主要的是對(duì) api 的設(shè)計(jì)和提供的功能進(jìn)行具體的開發(fā)，要保證兼容性和通用性，還有性能，在不依賴外部庫的情況下，各組件的通信等等會(huì)比較復(fù)雜。

組件封裝(獨(dú)立組件)

通過vue-cli搭建的項(xiàng)目，目錄下都有components目錄，自定義組件一般放在這里。

image.png

編寫一個(gè).vue文件和.js文件
index.vue內(nèi)容如下：

<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內(nèi)容如下：

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

image.png

這種方式引入的是全局組件。

• 獨(dú)立組件的開發(fā)最主要的就是對(duì)提供的外部接口進(jìn)行高度抽象，能通過配置實(shí)現(xiàn)需要的功能。提供外部接口的方式主要是通過組件之間通信的方式，如props,$emit和自定義事件。這類組件之間代碼是完全獨(dú)立的。