這篇文章主要介紹了Vue中的插件和組件有什么區(qū)別的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue中的插件和組件有什么區(qū)別文章都會有所收獲，下面我們一起來看看吧。

網(wǎng)站的建設(shè)創(chuàng)新互聯(lián)建站專注網(wǎng)站定制,經(jīng)驗豐富,不做模板,主營網(wǎng)站定制開發(fā).小程序定制開發(fā),H5頁面制作!給你煥然一新的設(shè)計體驗!已為成都不銹鋼雕塑等企業(yè)提供專業(yè)服務(wù)。

一、組件是什么

回顧以前對組件的定義：

組件就是把圖形、非圖形的各種邏輯均抽象為一個統(tǒng)一的概念（組件）來實現(xiàn)開發(fā)的模式，在Vue中每一個.vue文件都可以視為一個組件。

組件的優(yōu)勢

• 降低整個系統(tǒng)的耦合度，在保持接口不變的情況下，我們可以替換不同的組件快速完成需求，例如輸入框，可以替換為日歷、時間、范圍等組件作具體的實現(xiàn)

• 調(diào)試方便，由于整個系統(tǒng)是通過組件組合起來的，在出現(xiàn)問題的時候，可以用排除法直接移除組件，或者根據(jù)報錯的組件快速定位問題，之所以能夠快速定位，是因為每個組件之間低耦合，職責(zé)單一，所以邏輯會比分析整個系統(tǒng)要簡單

• 提高可維護性，由于每個組件的職責(zé)單一，并且組件在系統(tǒng)中是被復(fù)用的，所以對代碼進行優(yōu)化可獲得系統(tǒng)的整體升級

二、插件是什么

插件通常用來為 Vue 添加全局功能。插件的功能范圍沒有嚴(yán)格的限制——一般有下面幾種：

• 添加全局方法或者屬性。如: vue-custom-element

• 添加全局資源：指令/過濾器/過渡等。如 vue-touch

• 通過全局混入來添加一些組件選項。如vue-router

• 添加 Vue 實例方法，通過把它們添加到 Vue.prototype 上實現(xiàn)。

• 一個庫，提供自己的 API，同時提供上面提到的一個或多個功能。如vue-router

三、兩者的區(qū)別

兩者的區(qū)別主要表現(xiàn)在以下幾個方面：

• 編寫形式

• 注冊形式

• 使用場景

編寫形式

編寫組件

編寫一個組件，可以有很多方式，我們最常見的就是vue單文件的這種格式，每一個.vue文件我們都可以看成是一個組件

vue文件標(biāo)準(zhǔn)格式

<template>
</template>
<script>
export default{ 
    ...
}
</script>
<style>
</style>

我們還可以通過template屬性來編寫一個組件，如果組件內(nèi)容多，我們可以在外部定義template組件內(nèi)容，如果組件內(nèi)容并不多，我們可直接寫在template屬性上

<template id="testComponent">     // 組件顯示的內(nèi)容
    <div>component!</div>   
</template>

Vue.component('componentA',{ 
    template: '#testComponent'  
    template: `<div>component</div>`  // 組件內(nèi)容少可以通過這種形式
})

編寫插件

vue插件的實現(xiàn)應(yīng)該暴露一個 install 方法。這個方法的第一個參數(shù)是 Vue 構(gòu)造器，第二個參數(shù)是一個可選的選項對象

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方法，第一個參數(shù)為組件的名稱，第二個參數(shù)為傳入的配置項

Vue.component('my-component-name', { /* ... */ })

1\

局部注冊只需在用到的地方通過components屬性注冊一個組件

const component1 = {...} // 定義一個組件

export default {
	components:{
		component1   // 局部注冊
	}
}

插件注冊

插件的注冊通過Vue.use()的方式進行注冊（安裝），第一個參數(shù)為插件的名字，第二個參數(shù)是可選擇的配置項

Vue.use(插件名字,{ /* ... */} )

注意的是：

注冊插件的時候，需要在調(diào)用 new Vue() 啟動應(yīng)用之前完成

Vue.use會自動阻止多次注冊相同插件，只會注冊一次

使用場景

具體的其實在插件是什么章節(jié)已經(jīng)表述了，這里在總結(jié)一下

組件 (Component) 是用來構(gòu)成你的 App 的業(yè)務(wù)模塊，它的目標(biāo)是 App.vue

插件 (Plugin) 是用來增強你的技術(shù)棧的功能模塊，它的目標(biāo)是 Vue 本身

簡單來說，插件就是指對Vue的功能的增強或補充

關(guān)于“Vue中的插件和組件有什么區(qū)別”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“Vue中的插件和組件有什么區(qū)別”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享題目：Vue中的插件和組件有什么區(qū)別
網(wǎng)頁URL：http://www.chinadenli.net/article22/iiescc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、動態(tài)網(wǎng)站、網(wǎng)站排名、網(wǎng)站導(dǎo)航、定制開發(fā)、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)