欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue封裝通過API調(diào)用的組件的方法詳解

 更新時間:2022年12月26日 11:54:53   作者:三掌柜666  
在日常業(yè)務(wù)開發(fā)中我們會經(jīng)常封裝一些業(yè)務(wù)組件,下面這篇文章主要給大家介紹了關(guān)于Vue封裝通過API調(diào)用的組件的方法,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下

前言

在前端開發(fā)中,關(guān)于Vue的使用相比大家并不陌生,而且Vue框架的優(yōu)勢也是其他框架所不能比的,尤其是Vue的封裝思想更是堪稱一絕,還有就是組件化的運用實踐過程也是亮點。所以關(guān)于Vue框架的使用想必看官都不陌生,而且常用的核心技術(shù)點就那么點,本文就來分享一下關(guān)于通過Vue封裝API調(diào)用組件的使用,記錄一下,方便后期查閱使用。

封裝通過API調(diào)用的組件的設(shè)計思路

其實通過封裝成API調(diào)用的組件設(shè)計思路就是單例模式的思路,通過單例思維可以讓整個項目通用封裝的唯一組件,可以達到拿來即用的效果,具體還是得根據(jù)實際的業(yè)務(wù)需求來確定,比如需要被公用且多個模塊共同使用同一個數(shù)據(jù)源的情況;再比如實際業(yè)務(wù)場景中的一個自定義圖標的彈窗組件,由于在多個地方都會使用到這個彈框組件,這就需要搞成公共組件來使用。

封裝組件的方式

在實際Vue開發(fā)過程中,一般有兩種封裝Vue組件的方法:第一種就是常用的通過父組件props傳值給子組件、子組件$emit回傳值給父組件的方法;第二種就是通過調(diào)用API調(diào)用的組件的形式來使用。

單例模式定義

單例模式(Singleton),也叫單子模式,在軟件開發(fā)中是一種常用的軟件設(shè)計模式。在實際應(yīng)用該模式的時候,單例對象的類必須保證只有一個實例存在,因為在很多時候整個項目中只需要擁有一個全局對象,這樣有利于協(xié)調(diào)項目整體的行為,這種方式簡化了在復(fù)雜環(huán)境下的配置管理。

單例模式的優(yōu)缺點

1、優(yōu)點

  • 在單例模式中,單例只有一個實例,對單例類的所有實例化得到的都是同一個實例。這樣防止其它對象對自己的實例化,確保所有的對象都訪問同一個實例;
  • 單例模式具有一定的伸縮性;
  • 由于在程序內(nèi)存中只存在一個實例對象,因此可以節(jié)約系統(tǒng)資源,如果需要頻繁創(chuàng)建和銷毀的對象的時候,單例模式無疑可以提高系統(tǒng)的性能;
  • 可以避免對共享資源的多重占用。

2、缺點

  • 不適用于變化的對象,若同一類型的對象總是要在不同的用例場景發(fā)生變化,使用單例就會引起數(shù)據(jù)錯亂,不能保存各自的正確的狀態(tài);
  • 單利模式中沒有抽象層,所以單例類的擴展會很難;
  • 由于單例類的職責過重,在一定程度上違背了“單一職責原則”;
  • 濫用單例會帶來一些負面的問題,如實例化的對象長時間不被利用,系統(tǒng)會認為是垃圾而被回收,這會導(dǎo)致對象狀態(tài)的丟失。

單例模式適用場景

單例模式只允許創(chuàng)建一個實例對象,因此節(jié)省內(nèi)存,提高對象的訪問速度,所以對象需要被公用的場合使用,如多個模塊使用同一個數(shù)據(jù)源連接對象。

  • 可用于需要頻繁實例化然后銷毀的對象;
  • 可用于創(chuàng)建對象時耗時過多或者耗資源過多,但又經(jīng)常用到的對象;
  • 可用于有狀態(tài)的工具類對象;
  • 可用于頻繁訪問數(shù)據(jù)庫或文件的對象。

使用API調(diào)用組件的示例

在實際開發(fā)中,關(guān)于使用API調(diào)用的組件的使用場景很多,這里只介紹幾個常用的示例,方便參考使用。

示例一:封裝一個自定義圖標的彈框組件,然后通過使用API調(diào)用該組件

//1、封裝自定義圖標的彈框組件
<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);
// 使用這個方法調(diào)用tipPopup組件
function showTip(options){
options = options | | {};
if( typeof options==='object'){
     options ={
text: options.text,
img: options.img
     }
}else{
    new Error(‘參數(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、封裝實現(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)用的組件的方法的介紹,如果認真閱讀并且實踐示例,應(yīng)該會很好的掌握這些知識點,尤其是以后再遇到封裝組件的時候可以往這個方式上面來使用,因為通過調(diào)用API形式的組件是比較方便且專業(yè)的方式,這是一篇值得閱讀的文章,尤其是對于封裝使用還不是太熟練的開發(fā)者來說甚為重要,重要性就不在贅述。

到此這篇關(guān)于Vue封裝通過API調(diào)用的組件的方法的文章就介紹到這了,更多相關(guān)Vue封裝通過API調(diào)用組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

您可能感興趣的文章:

相關(guān)文章

最新評論