您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“vue中插件和組件的區(qū)別有哪些”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue中插件和組件的區(qū)別有哪些”這篇文章吧。
區(qū)別:1、組件注冊通過“Vue.component”或“components”屬性,而插件通過“Vue.use()”;2、組件是用來構(gòu)成App的業(yè)務(wù)模塊,它的目標是“App.vue”,而插件是用來增強技術(shù)棧的功能模塊,它的目標是Vue本身。
本教程操作環(huán)境:windows7系統(tǒng)、vue2.9.6版,DELL G3電腦。
回顧以前對組件的定義:
組件就是把圖形、非圖形的各種邏輯均抽象為一個統(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
添加全局功能。插件的功能范圍沒有嚴格的限制——一般有下面幾種:
添加全局方法或者屬性。如: vue-custom-element
添加全局資源:指令/過濾器/過渡等。如 vue-touch
通過全局混入來添加一些組件選項。如vue-router
添加 Vue
實例方法,通過把它們添加到 Vue.prototype
上實現(xiàn)。
一個庫,提供自己的 API
,同時提供上面提到的一個或多個功能。如vue-router
兩者的區(qū)別主要表現(xiàn)在以下幾個方面:
編寫形式
注冊形式
使用場景
編寫組件
編寫一個組件,可以有很多方式,我們最常見的就是vue
單文件的這種格式,每一個.vue
文件我們都可以看成是一個組件
vue
文件標準格式
<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', { /* ... */ })
局部注冊只需在用到的地方通過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ù)模塊,它的目標是 App.vue
插件 (Plugin)
是用來增強你的技術(shù)棧的功能模塊,它的目標是 Vue
本身
簡單來說,插件就是指對Vue
的功能的增強或補充
以上是“vue中插件和組件的區(qū)別有哪些”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。