開發(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目錄，自定義組件一般放在這里将鸵。
編寫一個(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;
這種方式引入的是全局組件路狮。
- 獨(dú)立組件的開發(fā)最主要的就是對(duì)提供的外部接口進(jìn)行高度抽象奄妨，能通過配置實(shí)現(xiàn)需要的功能苹祟。提供外部接口的方式主要是通過組件之間通信的方式砸抛，如props,$emit和自定義事件评雌。這類組件之間代碼是完全獨(dú)立的。
