在實際的開發中,我們進行組件和插件的注冊時候,發現那些插件和組件有些會推薦我們使用Vue.use()方法進行注冊,有些又會推薦我們使用Vue.component(),今天就這兩個注冊方法來簡單的談一談個人的理解
一、使用Vue.component()注冊
首先我們使用Vue.component()注冊的大部分是一些我們需要進行全域運用的自定義,所以我們會到main.js里面進行注冊，
Vue.component()里面接收兩個引數
第一個引數是自定義元素名稱，也就是將來在別的組件中使用這個組件的標簽名稱，
第二個引數是將要注冊的Vue組件，
1.單個自定義組件的注冊
例如我現在要注冊一個全域組件
首先我需要到在components全域組件的檔案夾中定義好這個組件
然后到我們main.js檔案中進行全域的注冊
import topTitle from '@/components/topTitle'
Vue.component('topTitle', topTitle)
// Vue.component(topTitle.name, topTitle) 在組件中定義了name的情況下可以這樣進行注冊
這樣我們就可以在全域其他組件中直接對這個組件進行使用就可以了
2.多個自定義組件的注冊
當我們需要進行多個組件的注冊時候,假如說都寫到main.js里面的話,這樣就會造成main.js檔案的臃腫與雜亂,那這時我們該怎么辦呢?
講到這里就不得不說到Vue.use()注冊與Vue.component()的關系了,講完就知道怎么進行操作了
二、使用Vue.use()注冊
一般開發中,我們常用Vue.use()方法進行注冊有Vue.use(Router)、Vue.use(Element-ui)等
import ElementUI from 'element-ui'
import Router from 'vue-router'
Vue.use(Router)
Vue.use(Element-ui)
那么這些組件或者插件跟我們自定義的組件有什么不同呢?
要知道這個問題,我們首先得知道Vue.use()接收的是一個什么引數
首先使用Vue.use注冊插件，這個方法接收一個物件，并且這個引數必須具有install方法，
這里我們創建一個演示用的一個js檔案
然后再里面先引入一個我們自己的組件 再默認匯出一個物件,里面有一個install的方法
import topTitle from '@/components/topTitle'
export default {
install(V) {
console.log(V)
console.dir(V)
V.component(topTitle)
}
}
再將這個方法在main.js中進行匯入并且進行注冊
import yanshi from './演示用'
Vue.use(yanshi)
我們去啟動專案,看看控制臺列印出來的install方法中的傳入值,看完這個列印值,估計就有一部分小伙伴能明白了
沒錯,這里的接收值就是我們的Vue實體
Vue.use函式內部會呼叫引數的install方法,并且將Vue實體傳入過去
為了讓大家更明顯的看出來,我們可以進行一下比對,我們先實體化Vue,再進行一下比對.結果是true
代表這兩者就是一個東西
有這個vue的實體在,我們可以在在install方法內部可以添加全域方法或者屬性、全域指令、添加實體方法、使用Vue.component()注冊組件等
這也是為什么有些組件或者插件可以直接Vue.use()注冊,因為他們在內部有一個install方法進行了注冊，而為了避免重復注冊的結果,會提示我們注冊方法
小結: Vue.use()注冊與Vue.component()注冊區別就在于一個insatll方法
說到這,大家就知道怎么進行大量的自定組件的全域注冊了
我們可以先創建一個js檔案,將所有需要進行全域注冊的組件匯入后,直接在內部默認匯出一個帶有install(Vue)方法的物件,直接使用Vue.component()進行注冊,再將js檔案在main.js中進行注冊就好了
雖然Vue.use()注冊與Vue.component()注冊區別就在于一個insatll方法,但是兩者之間的內部聯系,這次就先不講了,等下次有時間再出一篇兩者之間的構造器指向問題
最后 有說的不對的地方,歡迎大家批評指正,另外也希望大家多點贊!!
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/330345.html
標籤：其他
下一篇：EventLoop