vue中外掛和元件的區別點及用法總結
本教程操作環境：windows7系統、2.9.6版，DELL G3電腦。
一、元件是什麼
回顧以前對元件的定義：
元件就是把圖形、非圖形的各種邏輯均抽象為一個統一的概念（元件）來實現開發的模式，在Vue中每一個.vue檔案都可以視為一個元件
元件的優勢
- 降低整個系統的耦合度，在保持介面不變的情況下，我們可以替換不同的元件快速完成需求，例如輸入框，可以替換為日曆、時間、範圍等元件作具體的實現 www.cppcns.com
- 除錯方便，由於整fWhQooTFNX個系統是通過元件組合起來的，在出現問題的時候，可以用排除法直接移除元件，或者根據報錯的元件快速定位問題，之所以能夠快速定位，是因為每個元件之間低耦合，職責單一，所以邏輯會比分析整個系統要簡單
- 提高可維護性，由於每個元件的職責單一，並且元件在系統中是被複用的，所以對程式碼進行優化可獲得系統的整體升級
二、外掛是什麼
外掛通常用來為 Vue 新增全域性功能。外掛的功能範圍沒有嚴格的限制——一般有下面幾種：
-
http://www.cppcns.com
- 新增全域性方法或者屬性。如: 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的功能的增強或補充
到此這篇關於vue中外掛和元件的區別點及用法總結的文章就介紹到這了,更多相關vue中外掛和元件的區別是什麼內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！