這篇文章主要為大家展示了vue中的axios合并請求和slot，內(nèi)容簡而易懂，希望大家可以學(xué)習(xí)一下，學(xué)習(xí)完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。

大埔網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、自適應(yīng)網(wǎng)站建設(shè)等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)于2013年開始到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

一、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)
      })
  }
}

這樣可以實現(xiàn)發(fā)送兩個請求，只有所有都成功，才算是成功。只要有一個失敗，就算是失敗。

二、插槽slot

1.基本用法

插槽的出現(xiàn)使得我們可以在使用子組件時在子組件內(nèi)新增內(nèi)容，而不僅僅是簡單的使用，呈現(xiàn)出多樣化的子組件。

 Your Profile

當我們使用子組件navigation時，在子組件中寫入一些內(nèi)容，但是如果我們子組件的template中沒有一個插槽slot，那么我們寫入的Your Profile沒有的地方放，子組件怎么知道要放在哪里呢，不知道放在哪里，所以它就干脆不放了，會把寫的內(nèi)容拋棄，大家就當無事發(fā)生過，子組件里怎么寫，它就怎么呈現(xiàn)，全然不顧你在使用時寫入的東西，當做沒有看見。
但是如果我們在子組件中寫入了一個插槽slot，那么我們傳入的內(nèi)容將會被在這個插槽處呈現(xiàn)。像下面這樣

渲染出來的結(jié)果將是：

  Your Profile

2.具名插槽

有時候，我們需要在子組件中放置多個內(nèi)容，那么你只有一個slot，它只能全部放在這里（其實我也不知道是不是這樣我沒有試過），如果你有多個slot，它怎么知道哪個內(nèi)容要放在哪個slot，按順序放嗎？不是的（其實我也不知道是不是）。正確的做法就是使用具名插槽。所謂具名插槽就是一個帶有name的slot。也就是下面這樣

然后在使用上面這個子組件時像下面這樣

 

 
A paragraph for the main content.
 
And another one.

 

在使用時，通過一個具有slot屬性的標簽，屬性值對應(yīng)slot的name，將內(nèi)容放到子組件的相應(yīng)位置上去。

我們注意到，里面有一個沒有指定name的slot，它就是默認插槽。所有在使用子組件時傳入的東西，只要沒有指定slot='slot的name'，就都會放在這里。

我們還注意到，這里用的一個叫做template的標簽，一定要用它嗎？不是的，也可以直接放在h2或者p上面，像下面這樣

 
Here might be a page title

 
A paragraph for the main content.
 
And another one.

 
Here's some contact info

但是，如果你并不只有一個h2，你還有其他內(nèi)容也要一起放在這個插槽里，那你能怎么辦，為每一個要放在插槽里的標簽加slot嗎？太麻煩啦！所以就一起放在template里面，給template加slot咯。

3.插槽的默認內(nèi)容

有時候，我們也需要為某個插槽指定默認內(nèi)容。比如一個按鈕，默認顯示是 submit ，但我們有時在復(fù)用它的時候，我們又想改成別的，這個時候，就可以把這個按鈕的 submit 放在slot里面，然后在使用這個子組件的時候，放你要改的東西去改變它。如果沒有放，那就是默認的 submit。

 Submit 

4.作用域

在插槽中傳值時，如果想要使用數(shù)據(jù)，這個數(shù)據(jù)應(yīng)該是父組件的，而不能是子組件的。也就是說是使用子組件的那個組件的data。

 Logged in as {{ user.name }} 

這里的user不是navigation-link的，而是父組件的

牢記一條準則：父組件模板的所有東西都會在父級作用域內(nèi)編譯；子組件模板的所有東西都會在子級作用域內(nèi)編譯。

5.作用域插槽 【2.1.0+ 新增】（我也不知道為什么要叫這個名字，和插槽的作用于太像，很容易搞混?。?/p>

上面我們提到，插槽是具有作用于的，且當我們在使用子組件時，是無法獲取子組件的數(shù)據(jù)的。而有時，我們又需要獲取它，那么應(yīng)該怎么辦呢？

比如一個名為todo-list的子組件，它的內(nèi)容如下：

 

  {{ todo.text }}
 

這時，這里所獲取的數(shù)據(jù)是子組件自己內(nèi)部的數(shù)據(jù)。而我們在使用這個子組件時是無法獲取它的（當然我們可以用以前學(xué)習(xí)過的父子組件間的通訊來實現(xiàn)），我們可以利用slot來達到這個目的

 

  
  
  
   
   {{ todo.text }}
  
 

然后當我們使用todo-list組件的是時候，可以這樣做

這時即使我們是在父組件中，也還是可以獲取到子組件的數(shù)據(jù)。其中slotProps只是一個名字，我們用slot-scope指定為什么名字，就可以在下面用xx.來獲取子組件的data
在 2.5.0+，slot-scope 不再限制在