Vue封裝通過API調(diào)用的組件的方法詳解
前言
在前端開發(fā)中,關(guān)于Vue的使用相比大家并不陌生,而且Vue框架的優(yōu)勢也是其他框架所不能比的,尤其是Vue的封裝思想更是堪稱一絕,還有就是組件化的運(yùn)用實(shí)踐過程也是亮點(diǎn)。所以關(guān)于Vue框架的使用想必看官都不陌生,而且常用的核心技術(shù)點(diǎn)就那么點(diǎn),本文就來分享一下關(guān)于通過Vue封裝API調(diào)用組件的使用,記錄一下,方便后期查閱使用。
封裝通過API調(diào)用的組件的設(shè)計(jì)思路
其實(shí)通過封裝成API調(diào)用的組件設(shè)計(jì)思路就是單例模式的思路,通過單例思維可以讓整個(gè)項(xiàng)目通用封裝的唯一組件,可以達(dá)到拿來即用的效果,具體還是得根據(jù)實(shí)際的業(yè)務(wù)需求來確定,比如需要被公用且多個(gè)模塊共同使用同一個(gè)數(shù)據(jù)源的情況;再比如實(shí)際業(yè)務(wù)場景中的一個(gè)自定義圖標(biāo)的彈窗組件,由于在多個(gè)地方都會使用到這個(gè)彈框組件,這就需要搞成公共組件來使用。
封裝組件的方式
在實(shí)際Vue開發(fā)過程中,一般有兩種封裝Vue組件的方法:第一種就是常用的通過父組件props傳值給子組件、子組件$emit回傳值給父組件的方法;第二種就是通過調(diào)用API調(diào)用的組件的形式來使用。
單例模式定義
單例模式(Singleton),也叫單子模式,在軟件開發(fā)中是一種常用的軟件設(shè)計(jì)模式。在實(shí)際應(yīng)用該模式的時(shí)候,單例對象的類必須保證只有一個(gè)實(shí)例存在,因?yàn)樵诤芏鄷r(shí)候整個(gè)項(xiàng)目中只需要擁有一個(gè)全局對象,這樣有利于協(xié)調(diào)項(xiàng)目整體的行為,這種方式簡化了在復(fù)雜環(huán)境下的配置管理。
單例模式的優(yōu)缺點(diǎn)
1、優(yōu)點(diǎn)
- 在單例模式中,單例只有一個(gè)實(shí)例,對單例類的所有實(shí)例化得到的都是同一個(gè)實(shí)例。這樣防止其它對象對自己的實(shí)例化,確保所有的對象都訪問同一個(gè)實(shí)例;
- 單例模式具有一定的伸縮性;
- 由于在程序內(nèi)存中只存在一個(gè)實(shí)例對象,因此可以節(jié)約系統(tǒng)資源,如果需要頻繁創(chuàng)建和銷毀的對象的時(shí)候,單例模式無疑可以提高系統(tǒng)的性能;
- 可以避免對共享資源的多重占用。
2、缺點(diǎn)
- 不適用于變化的對象,若同一類型的對象總是要在不同的用例場景發(fā)生變化,使用單例就會引起數(shù)據(jù)錯(cuò)亂,不能保存各自的正確的狀態(tài);
- 單利模式中沒有抽象層,所以單例類的擴(kuò)展會很難;
- 由于單例類的職責(zé)過重,在一定程度上違背了“單一職責(zé)原則”;
- 濫用單例會帶來一些負(fù)面的問題,如實(shí)例化的對象長時(shí)間不被利用,系統(tǒng)會認(rèn)為是垃圾而被回收,這會導(dǎo)致對象狀態(tài)的丟失。
單例模式適用場景
單例模式只允許創(chuàng)建一個(gè)實(shí)例對象,因此節(jié)省內(nèi)存,提高對象的訪問速度,所以對象需要被公用的場合使用,如多個(gè)模塊使用同一個(gè)數(shù)據(jù)源連接對象。
- 可用于需要頻繁實(shí)例化然后銷毀的對象;
- 可用于創(chuàng)建對象時(shí)耗時(shí)過多或者耗資源過多,但又經(jīng)常用到的對象;
- 可用于有狀態(tài)的工具類對象;
- 可用于頻繁訪問數(shù)據(jù)庫或文件的對象。
使用API調(diào)用組件的示例
在實(shí)際開發(fā)中,關(guān)于使用API調(diào)用的組件的使用場景很多,這里只介紹幾個(gè)常用的示例,方便參考使用。
示例一:封裝一個(gè)自定義圖標(biāo)的彈框組件,然后通過使用API調(diào)用該組件
//1、封裝自定義圖標(biāo)的彈框組件 <template> <div id="tipPopup"> <div class="tipWrap">< img :src="img"/> <p>{{text}}</p ></div></div> </template><script> export default { name:'tipPopup', data(){ return{ text:'' , img:'' , } } </script> <style lang="less"> #tipPopup{ .tipsWrap{ position: absolute; background:#fff; top:50%; left:40%; width:100px; height:100px; border-radius:8px; img{ position: absolute; left:0.85rem; top:0.4rem; } } } //2、在Vue文件的同一目錄下新創(chuàng)建tipPopup.js文件 import vue from 'vue'; import tipPopup from './tipPopup.vue‘ const TipConstr = Vue.extend(tipPopup); // 使用這個(gè)方法調(diào)用tipPopup組件 function showTip(options){ options = options | | {}; if( typeof options==='object'){ options ={ text: options.text, img: options.img } }else{ new Error(‘參數(shù)錯(cuò)誤!') } // 實(shí)例化子組件 const tipInstence = new TipConstr({data:options}); let timer; tipInstence.vm = tipInstence.$mount(); document.getElementById('app').appendChild(tipInstence.vm.$el); timer=setTimeout(function(){ //3000毫秒后將組件移除 document.getElementById('app').removeChild(tipInstence.vm.$el); clearTimeout(timer); },3000) export default showTip; //3、具體的使用頁面,調(diào)用的方法 openTip(){ showTips({text:”提交成功”, img:success}); }
示例二:vue封裝使用API調(diào)用組件
//1、封裝實(shí)現(xiàn)vue組件模板 <template> <div>{{tipTitle}}</div> </template> <script> export default { data () { return { title:'test', duration: 2000, } } } </script> <style> </style> //2、封裝API文件,在Vue文件的同一目錄下新創(chuàng)建test.js文件 import vue from 'vue'; import tipPopup from './test.vue‘ const temp = Vue.extend(test) const Message = function (option) { const msg = new temp({ data: option }) let vm = msg.$mount(); let el = vm.$el; document.body.appendChild(el) setTimeout(() => { document.body.removeChild(el) msg.$destroy() vm = null },vm.duration) } export default Message //3、使用,在具體需要使用的文件調(diào)用,import引入test.js文件,就通過方法調(diào)用組件 import test from './test.js'; test({ text: ‘111' });
拓展:父子組件通信
父組件通過props給子組件傳值的(組件中的數(shù)據(jù)有三種:data、props、computed)。
最后
通過本文關(guān)于Vue封裝通過API調(diào)用的組件的方法的介紹,如果認(rèn)真閱讀并且實(shí)踐示例,應(yīng)該會很好的掌握這些知識點(diǎn),尤其是以后再遇到封裝組件的時(shí)候可以往這個(gè)方式上面來使用,因?yàn)橥ㄟ^調(diào)用API形式的組件是比較方便且專業(yè)的方式,這是一篇值得閱讀的文章,尤其是對于封裝使用還不是太熟練的開發(fā)者來說甚為重要,重要性就不在贅述。
到此這篇關(guān)于Vue封裝通過API調(diào)用的組件的方法的文章就介紹到這了,更多相關(guān)Vue封裝通過API調(diào)用組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue 實(shí)現(xiàn)通過手機(jī)發(fā)送短信驗(yàn)證碼注冊功能
這篇文章主要介紹了vue 實(shí)現(xiàn)通過手機(jī)發(fā)送短信驗(yàn)證碼注冊功能的相關(guān)資料,需要的朋友可以參考下2018-04-04Vue 實(shí)現(xiàn)樹形視圖數(shù)據(jù)功能
這篇文章主要介紹了Vue 實(shí)現(xiàn)樹形視圖數(shù)據(jù)功能,利用簡單的樹形視圖實(shí)現(xiàn)的,在實(shí)現(xiàn)過程中熟悉了組件的遞歸使用,感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05vite分目錄打包及去掉默認(rèn)的.gz?文件的操作方法
Vite在默認(rèn)配置下會將資源打包至assets文件夾并添加哈希值,不同于Webpack的多文件夾存放方式,Vite只對public文件夾不進(jìn)行打包處理,而Webpack不打包public和static文件夾,本文介紹vite分目錄打包及去掉默認(rèn)的.gz?文件的操作方法,感興趣的朋友一起看看吧2024-09-09vue jsx 使用指南及vue.js 使用jsx語法的方法
這篇文章主要介紹了vue jsx 使用指南及vue.js 使用jsx語法的方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-11-11vue-auto-focus: 控制自動(dòng)聚焦行為的 vue 指令方法
今天小編就為大家分享一篇vue-auto-focus: 控制自動(dòng)聚焦行為的 vue 指令方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08Vue 使用iframe引用html頁面實(shí)現(xiàn)vue和html頁面方法的調(diào)用操作
這篇文章主要介紹了Vue 使用iframe引用html頁面實(shí)現(xiàn)vue和html頁面方法的調(diào)用操作,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11ElementUI的this.$notify.close()調(diào)用不起作用的解決
本文主要介紹了ElementUI的this.$notify.close()調(diào)用不起作用的解決,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08如何用vue3+Element?plus實(shí)現(xiàn)一個(gè)完整登錄功能
要實(shí)現(xiàn)用戶的登錄功能,可以使用Vue3和Element?Plus,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue3和Element?Plus組件庫實(shí)現(xiàn)一個(gè)完整的登錄功能,文中提供了詳細(xì)的代碼示例,需要的朋友可以參考下2023-10-10