這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 一、組件是什麼 回顧以前對組件的定義： 組件就是把圖形、非圖形的各種邏輯均抽象為一個統一的概念（組件）來實現開發的模式，在Vue中每一個.vue文件都可以視為一個組件 組件的優勢 降低整個系統的耦合度，在保持介面不變的情況下，我們可以替換 ...
這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
一、組件是什麼
回顧以前對組件的定義：
組件就是把圖形、非圖形的各種邏輯均抽象為一個統一的概念（組件）來實現開發的模式，在Vue中每一個.vue文件都可以視為一個組件
組件的優勢
-
降低整個系統的耦合度，在保持介面不變的情況下，我們可以替換不同的組件快速完成需求，例如輸入框，可以替換為日曆、時間、範圍等組件作具體的實現
-
調試方便，由於整個系統是通過組件組合起來的，在出現問題的時候，可以用排除法直接移除組件，或者根據報錯的組件快速定位問題，之所以能夠快速定位，是因為每個組件之間低耦合，職責單一，所以邏輯會比分析整個系統要簡單
-
提高可維護性，由於每個組件的職責單一，並且組件在系統中是被覆用的，所以對代碼進行優化可獲得系統的整體升級
二、插件是什麼
插件通常用來為 Vue 添加全局功能。插件的功能範圍沒有嚴格的限制——一般有下麵幾種：
- 添加全局方法或者屬性。如:
vue-custom-element - 添加全局資源：指令/過濾器/過渡等。如
vue-touch - 通過全局混入來添加一些組件選項。如
vue-router - 添加
Vue實例方法，通過把它們添加到Vue.prototype上實現。 - 一個庫，提供自己的
API，同時提供上面提到的一個或多個功能。如vue-router
三、兩者的區別
兩者的區別主要表現在以下幾個方面：
- 編寫形式
- 註冊形式
- 使用場景
編寫形式
編寫組件
編寫一個組件，可以有很多方式，我們最常見的就是vue單文件的這種格式，每一個.vue文件我們都可以看成是一個組件
vue文件標準格式
<template>
</template>
<script>
export default{
...
}
</script>
<style>
</style>
我們還可以通過template屬性來編寫一個組件，如果組件內容多，我們可以在外部定義template組件內容，如果組件內容並不多，我們可直接寫在template屬性上
<template id="testComponent"> // 組件顯示的內容
<div>component!</div>
</template>
Vue.component('componentA',{
template: '#testComponent'
template: `<div>component</div>` // 組件內容少可以通過這種形式
})
編寫插件
vue插件的實現應該暴露一個 install 方法。這個方法的第一個參數是 Vue 構造器，第二個參數是一個可選的選項對象
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或 property
Vue.myGlobalMethod = function () {
// 邏輯...
}
// 2. 添加全局資源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 邏輯...
}
...
})
// 3. 註入組件選項
Vue.mixin({
created: function () {
// 邏輯...
}
...
})
// 4. 添加實例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 邏輯...
}
}
註冊形式
組件註冊
vue組件註冊主要分為全局註冊與局部註冊
全局註冊通過Vue.component方法，第一個參數為組件的名稱，第二個參數為傳入的配置項
Vue.component('my-component-name', { /* ... */ })
局部註冊只需在用到的地方通過components屬性註冊一個組件
const component1 = {...} // 定義一個組件
export default {
components:{
component1 // 局部註冊
}
}
插件註冊
插件的註冊通過Vue.use()的方式進行註冊（安裝），第一個參數為插件的名字，第二個參數是可選擇的配置項
Vue.use(插件名字,{ /* ... */} )
註意的是：
註冊插件的時候，需要在調用 new Vue() 啟動應用之前完成
Vue.use會自動阻止多次註冊相同插件，只會註冊一次
使用場景
具體的其實在插件是什麼章節已經表述了，這裡在總結一下
組件 (Component) 是用來構成你的 App 的業務模塊，它的目標是 App.vue
插件 (Plugin) 是用來增強你的技術棧的功能模塊，它的目標是 Vue 本身
簡單來說，插件就是指對Vue的功能的增強或補充
參考文獻
- https://vue3js.cn/docs/zh
