一、axios合并請(qǐng)求

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è)請(qǐng)求，只有所有都成功，才算是成功。只要有一個(gè)失敗，就算是失敗。

二、插槽slot

1.基本用法

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

<navigation-link>
 Your Profile
</navigation-link>

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

<a v-bind:href="url" rel="external nofollow" rel="external nofollow" class="nav-link">
 <slot></slot>
</a>

渲染出來(lái)的結(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í)我也不知道是不是這樣我沒(méi)有試過(guò)），如果你有多個(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">
  <h1>Here might be a page title</h1>
 </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í)，通過(guò)一個(gè)具有slot屬性的標(biāo)簽，屬性值對(duì)應(yīng)slot的name，將內(nèi)容放到子組件的相應(yīng)位置上去。

我們注意到，里面有一個(gè)沒(méi)有指定name的slot，它就是默認(rèn)插槽。所有在使用子組件時(shí)傳入的東西，只要沒(méi)有指定slot='slot的name'，就都會(huì)放在這里。

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

<base-layout>
 <h1 slot="header">Here might be a page title</h1>

 <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è)h1，你還有其他內(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í)候，放你要改的東西去改變它。如果沒(méi)有放，那就是默認(rèn)的 submit。

<button type="submit">
 <slot>Submit</slot> <!--Submit就是插槽的默認(rèn)內(nèi)容-->
</button>

4.作用域

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

<navigation-link url="/profile">
 Logged in as {{ user.name }} 
</navigation-link>

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

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

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

上面我們提到，插槽是具有作用于的，且當(dāng)我們?cè)谑褂米咏M件時(shí)，是無(wú)法獲取子組件的數(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ù)。而我們?cè)谑褂眠@個(gè)子組件時(shí)是無(wú)法獲取它的（當(dāng)然我們可以用以前學(xué)習(xí)過(guò)的父子組件間的通訊來(lái)實(shí)現(xiàn)），我們可以利用slot來(lái)達(dá)到這個(gè)目的

<ul>
 <li v-for="todo in todos" v-bind:key="todo.id" >
  <!-- 我們?yōu)槊總€(gè) todo 準(zhǔn)備了一個(gè)插槽，-->
  <!-- 將 `todo` 對(duì)象作為一個(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è)模板，-->
  <!-- 通過(guò) `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.來(lái)獲取子組件的data
在 2.5.0+，slot-scope 不再限制在 <template> 元素上使用，而可以用在插槽內(nèi)的任何元素或組件上。

以上就是詳解vue中的axios和slot的詳細(xì)內(nèi)容，更多關(guān)于vue axios和slot的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論