本篇內(nèi)容介紹了“Vue.use的作用是什么”的有關(guān)知識(shí),在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的困境,接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
站在用戶的角度思考問(wèn)題,與客戶深入溝通,找到大同網(wǎng)站設(shè)計(jì)與大同網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗(yàn),讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合,創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品,建站類(lèi)型包括:成都網(wǎng)站制作、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、申請(qǐng)域名、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋大同地區(qū)。
在使用 ElementUI 組件的時(shí)候,通常我們會(huì)這么寫(xiě):
import ElementUI from 'element-ui'; Vue.use(ElementUI);
這樣寫(xiě)完后,在我們自定義的組件中既可以直接使用:
<template> <div> <el-button type="primary">我是素燕</el-button> </div> </template>
通過(guò)本文我們來(lái)分析下它是如何實(shí)現(xiàn)的。
Vue 提供了一種插件機(jī)制,可以給 Vue 擴(kuò)充一些屬性,其實(shí)這個(gè)插件比較"可笑",什么也沒(méi)做,不信看下源碼:
Vue 內(nèi)部只是幫你判斷了下有沒(méi)有重復(fù)注冊(cè),并調(diào)用了你傳給它的函數(shù),其實(shí)我自已也可以調(diào)用,反而饒了一圈,可能框架設(shè)計(jì)有自己的考慮吧。
按官方的說(shuō)法,插件可以是一個(gè)函數(shù)或者是包含install函數(shù)的對(duì)象。Element-ui 可以一次性把所有的組件引入,也可以引入其中某一個(gè),它內(nèi)部其實(shí)使用的就是插件機(jī)制。我們動(dòng)手自己實(shí)現(xiàn)一下:
目錄結(jié)構(gòu)如下:
SyElement/index.js:
定義了一個(gè)插件,該插件中通過(guò) Vue 提供的全局函數(shù) component 在全局注冊(cè)了組件 SyInfo 和 SyMessage,看代碼:
import SyInfo from './SyInfo/index'; import SyMessage from './SyMessage/index'; import log from './log'; export default { install(Vue, options) { // 全局注冊(cè)組件 SyInfo Vue.component(SyInfo.name, SyInfo); // 全局注冊(cè)組件 SyMessage Vue.component(SyMessage.name, SyMessage); // 給 Vue 添加一個(gè)全局函數(shù),該函數(shù)可在所有的組件中使用 Vue.prototype.$loglog = log; } }
由于要支持單組件使用,故每個(gè)組件其實(shí)也是一個(gè)插件。
import SyMessage from './src/component.vue'; // 提供一個(gè) install 函數(shù) SyMessage.install = function(Vue) { Vue.component(SyMessage.name, SyMessage); } export default SyMessage;
component.vue 就是一個(gè)組件的具體實(shí)現(xiàn):
<template> <div class="sy-info"> 剖析element-ui的實(shí)現(xiàn)方式 </div> </template> <script> export default { name: 'SyMessage' } </script>
SyMessage 和 SyInfo 的實(shí)現(xiàn)一樣。到此便可以和 Element-ui 一樣的方式使用了:
import ElementUI from 'element-ui'; Vue.use(ElementUI);
<template> <div> <sy-info></sy-info> <sy-message></sy-message> </div> </template>
多說(shuō)一句:有時(shí)候,有些業(yè)務(wù)需求需要在每個(gè)組件中使用某個(gè)服務(wù),比如數(shù)據(jù)統(tǒng)計(jì),其實(shí)可以在 Vue 全局中掛載一個(gè)函數(shù),這樣在每個(gè)組件中即可使用,比如文章提到的 log 就是在全局掛載的一個(gè)函數(shù):
Vue.prototype.$loglog = log;
在所有的組件中既可以這樣使用:
this.$log({ uid: 'suyan' });
“Vue.use的作用是什么”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
標(biāo)題名稱(chēng):Vue.use的作用是什么
文章起源:http://bm7419.com/article24/gococe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供服務(wù)器托管、用戶體驗(yàn)、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站排名、面包屑導(dǎo)航、外貿(mào)建站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)