您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了vue中的axios合并請求和slot,內(nèi)容簡而易懂,希望大家可以學(xué)習(xí)一下,學(xué)習(xí)完之后肯定會有收獲的,下面讓小編帶大家一起來看看吧。
一、axios合并請求
export default { data(){ return {} }, created(){ function getMsg(res1,res2){ console.log(res1) console.log(res2) } this.$axios.all([ this,axios.post('URL','key=value'), this.axios.get('URL') ]) .then(this.$axios.spread(getMsg)) //分發(fā)響應(yīng) .catch(err => { console.log(err) }) } }
這樣可以實(shí)現(xiàn)發(fā)送兩個(gè)請求,只有所有都成功,才算是成功。只要有一個(gè)失敗,就算是失敗。
二、插槽slot
1.基本用法
插槽的出現(xiàn)使得我們可以在使用子組件時(shí)在子組件內(nèi)新增內(nèi)容,而不僅僅是簡單的使用,呈現(xiàn)出多樣化的子組件。
<navigation-link> Your Profile </navigation-link>
當(dāng)我們使用子組件navigation
時(shí),在子組件中寫入一些內(nèi)容,但是如果我們子組件的template
中沒有一個(gè)插槽slot
,那么我們寫入的Your Profile
沒有的地方放,子組件怎么知道要放在哪里呢,不知道放在哪里,所以它就干脆不放了,會把寫的內(nèi)容拋棄,大家就當(dāng)無事發(fā)生過,子組件里怎么寫,它就怎么呈現(xiàn),全然不顧你在使用時(shí)寫入的東西,當(dāng)做沒有看見。
但是如果我們在子組件中寫入了一個(gè)插槽slot
,那么我們傳入的內(nèi)容將會被在這個(gè)插槽處呈現(xiàn)。像下面這樣
<a v-bind:href="url" rel="external nofollow" rel="external nofollow" class="nav-link"> <slot></slot> </a>
渲染出來的結(jié)果將是:
<a v-bind:href="url" rel="external nofollow" rel="external nofollow" class="nav-link"> Your Profile </a>
2.具名插槽
有時(shí)候,我們需要在子組件中放置多個(gè)內(nèi)容,那么你只有一個(gè)slot
,它只能全部放在這里(其實(shí)我也不知道是不是這樣我沒有試過),如果你有多個(gè)slot
,它怎么知道哪個(gè)內(nèi)容要放在哪個(gè)slot
,按順序放嗎?不是的(其實(shí)我也不知道是不是)。正確的做法就是使用具名插槽。所謂具名插槽就是一個(gè)帶有name
的slot
。也就是下面這樣
<!--base-layout.vue--> <div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> <!--默認(rèn)插槽--> </main> <footer> <slot name="footer"></slot> </footer> </div>
然后在使用上面這個(gè)子組件時(shí)像下面這樣
<base-layout> <template slot="header"> <h2>Here might be a page title</h2> </template> <p>A paragraph for the main content.</p> <p>And another one.</p> <template slot="footer"> <p>Here's some contact info</p> </template> </base-layout>
在使用時(shí),通過一個(gè)具有slot
屬性的標(biāo)簽,屬性值對應(yīng)slot
的name
,將內(nèi)容放到子組件的相應(yīng)位置上去。
我們注意到,里面有一個(gè)沒有指定name
的slot
,它就是默認(rèn)插槽。所有在使用子組件時(shí)傳入的東西,只要沒有指定slot='slot的name'
,就都會放在這里。
我們還注意到,這里用的一個(gè)叫做template
的標(biāo)簽,一定要用它嗎?不是的,也可以直接放在h2
或者p
上面,像下面這樣
<base-layout> <h2 slot="header">Here might be a page title</h2> <p>A paragraph for the main content.</p> <p>And another one.</p> <p slot="footer">Here's some contact info</p> </base-layout>
但是,如果你并不只有一個(gè)h2
,你還有其他內(nèi)容也要一起放在這個(gè)插槽里,那你能怎么辦,為每一個(gè)要放在插槽里的標(biāo)簽加slot
嗎?太麻煩啦!所以就一起放在template
里面,給template
加slot
咯。
3.插槽的默認(rèn)內(nèi)容
有時(shí)候,我們也需要為某個(gè)插槽指定默認(rèn)內(nèi)容。比如一個(gè)按鈕,默認(rèn)顯示是 submit ,但我們有時(shí)在復(fù)用它的時(shí)候,我們又想改成別的,這個(gè)時(shí)候,就可以把這個(gè)按鈕的 submit 放在slot
里面,然后在使用這個(gè)子組件的時(shí)候,放你要改的東西去改變它。如果沒有放,那就是默認(rèn)的 submit。
<button type="submit"> <slot>Submit</slot> <!--Submit就是插槽的默認(rèn)內(nèi)容--> </button>
4.作用域
在插槽中傳值時(shí),如果想要使用數(shù)據(jù),這個(gè)數(shù)據(jù)應(yīng)該是父組件的,而不能是子組件的。也就是說是使用子組件的那個(gè)組件的data
。
<navigation-link url="/profile"> Logged in as {{ user.name }} </navigation-link>
這里的user不是navigation-link
的,而是父組件的
牢記一條準(zhǔn)則:父組件模板的所有東西都會在父級作用域內(nèi)編譯;子組件模板的所有東西都會在子級作用域內(nèi)編譯。
5.作用域插槽 【2.1.0+ 新增】(我也不知道為什么要叫這個(gè)名字,和插槽的作用于太像,很容易搞混?。?/p>
上面我們提到,插槽是具有作用于的,且當(dāng)我們在使用子組件時(shí),是無法獲取子組件的數(shù)據(jù)的。而有時(shí),我們又需要獲取它,那么應(yīng)該怎么辦呢?
比如一個(gè)名為todo-list
的子組件,它的內(nèi)容如下:
<ul> <li v-for="todo in todos" v-bind:key="todo.id"> {{ todo.text }} </li> </ul>
這時(shí),這里所獲取的數(shù)據(jù)是子組件自己內(nèi)部的數(shù)據(jù)。而我們在使用這個(gè)子組件時(shí)是無法獲取它的(當(dāng)然我們可以用以前學(xué)習(xí)過的父子組件間的通訊來實(shí)現(xiàn)),我們可以利用slot
來達(dá)到這個(gè)目的
<ul> <li v-for="todo in todos" v-bind:key="todo.id" > <!-- 我們?yōu)槊總€(gè) todo 準(zhǔn)備了一個(gè)插槽,--> <!-- 將 `todo` 對象作為一個(gè)插槽的 prop 傳入。--> <slot v-bind:todo="todo"> <!-- 回退的內(nèi)容 --> {{ todo.text }} </slot> </li> </ul>
然后當(dāng)我們使用todo-list組件的是時(shí)候,可以這樣做
<todo-list v-bind:todos="todos"> <!-- 將 `slotProps` 定義為插槽作用域的名字 --> <template slot-scope="slotProps"> <!-- 為待辦項(xiàng)自定義一個(gè)模板,--> <!-- 通過 `slotProps` 定制每個(gè)待辦項(xiàng)。--> <span v-if="slotProps.todo.isComplete">✓</span> {{ slotProps.todo.text }} </template> </todo-list>
這時(shí)即使我們是在父組件中,也還是可以獲取到子組件的數(shù)據(jù)。其中slotProps
只是一個(gè)名字,我們用slot-scope
指定為什么名字,就可以在下面用xx.
來獲取子組件的data
在 2.5.0+,slot-scope 不再限制在 <template> 元素上使用,而可以用在插槽內(nèi)的任何元素或組件上。
以上就是關(guān)于vue中的axios合并請求和slot的內(nèi)容,如果你們有學(xué)習(xí)到知識或者技能,可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。