一、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)) //分发响应
      .catch(err => { 
        console.log(err)
      })
  }
}

那样能够完成推送2个请求,仅有全部都取得成功,才算作取得成功。要是有一个不成功,就算是不成功。

二、扩展槽slot

1.基础使用方法

扩展槽的出現促使我们可以在应用子部件时在子部件内增加內容,而不仅是简易的应用,展现出多元化的子部件。

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

在我们应用子部件navigation时,在子部件中载入一些內容,可是如果我们子部件的template中没有一个扩展槽slot,那麼大家载入的Your Profile沒有的地区放,子部件如何判断要放到哪儿呢,不清楚放到哪儿,因此它就果断不放了,会把写的內容抛下,大伙儿就当没事产生过,子部件里怎么写,它就如何展现,全然不顾你一直在应用时载入的物品,作为沒有看到。
可是如果我们在子部件中载入了一个扩展槽slot,那麼大家传到的內容可能被在这个扩展槽处展现。像下边那样

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

3D渲染出去的結果将是:

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

2.具名扩展槽

有时,大家必须在子部件中置放好几个內容,那麼你只有一个slot,它只有所有放到这儿(实际上我不知道是否那样也没有试过),假如给你好几个slot,它如何判断哪一个內容要放到哪一个slot,按序放吗?并不是的(实际上我不知道是否)。恰当的作法便是应用具名扩展槽。说白了具名扩展槽便是一个含有nameslot。也就是下边那样

<!--base-layout.vue-->
<div class="container">
 <header>
  <slot name="header"></slot>
 </header>
 <main>
  <slot></slot> <!--默认设置扩展槽-->
 </main>
 <footer>
  <slot name="footer"></slot>
 </footer>
</div>

随后在应用上边这一子部件时像下边那样

<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>

在应用时,根据一个具备slot特性的标识,特性值相匹配slotname,将內容放进子部件的相对部位上来。

大家注意到,里边有一个沒有特定nameslot,它便是默认设置扩展槽。全部在应用子部件时传到的物品,要是沒有特定slot='slot的name',就都是会放到这儿。

大家还注意到,这儿用的一个称为template的标识,一定要用它吗?并不是的,还可以立即放到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>

可是,假如你并不只有一个h1,你也有别的內容还要一起放到这一扩展槽里,那么你能该怎么办,为每一个要放到扩展槽里的标识加slot吗?太不便啦!因此就一起放到template里边,给templateslot咯。

3.扩展槽的默认设置內容

有时,大家也必须为某一扩展槽特定默认设置內容。例如一个按键,默认设置显示信息是 submit ,但大家有时候在重复使用它的情况下,大家又想改为其他,这个时候,就可以把这个按键的 submit 放到slot里边,随后在应用这一子部件的情况下,放你需要改的物品去更改它。要是没有放,那便是默认设置的 submit。

<button type="submit">
 <slot>Submit</slot> <!--Submit便是扩展槽的默认设置內容-->
</button>

4.作用域

在扩展槽中国传媒大学值时,假如要想应用数据信息,这一数据信息应该是父部件的,而不可以是子部件的。换句话说是应用子部件的哪个部件的data

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

这儿的user并不是navigation-link的,只是父部件的

铭记一条规则:父部件模版的全部物品都是会在父级作用域内编译程序;子部件模版的全部物品都是会在子级作用域内编译程序。

5.作用域扩展槽 【2.1.0 增加】(我不知道为何要叫这一姓名,和扩展槽的功效于太像,非常容易弄混啊)

上边大家提及,扩展槽是具备功效于的,且在我们在应用子部件时,是没法获得子部件的数据信息的。而有时候,大家又必须获得它,那麼应当怎么办呢?

例如一个名叫todo-list的子部件,它的內容以下:

<ul>
 <li v-for="todo in todos"  v-bind:key="todo.id">
  {{ todo.text }}
 </li>
</ul>

这时候,这儿所获得的数据信息是子部件自身內部的数据信息。而我们在应用这一子部件时是没法获得它的(自然大家可以用之前学习培训过的父子俩部件间的通信来完成),我们可以运用slot来做到这一目地

<ul>
 <li v-for="todo in todos" v-bind:key="todo.id" >
  <!-- 大家为每一个 todo 提前准备了一个扩展槽,-->
  <!-- 将 `todo` 目标做为一个扩展槽的 prop 传到。-->
  <slot v-bind:todo="todo">
   <!-- 返回的內容 -->
   {{ todo.text }}
  </slot>
 </li>
</ul>

随后在我们应用todo-list部件的是情况下,能够那样做

<todo-list v-bind:todos="todos">
 <!-- 将 `slotProps` 界定为扩展槽作用域的姓名 -->
 <template slot-scope="slotProps">
  <!-- 为待办事项项自定一个模版,-->
  <!-- 根据 `slotProps` 订制每一个待办事项项。-->
  <span v-if="slotProps.todo.isComplete">✓</span>
  {{ slotProps.todo.text }}
 </template>
</todo-list>

这时候即便 我们都是在父部件中,也還是能够获得到子部件的数据信息。在其中slotProps仅仅一个姓名,大家用slot-scope特定为何姓名,就可以在下面用xx.来获得子部件的data
在 2.5.0 ,slot-scope 已不限定在 <template> 原素上应用,而可以用在扩展槽内的一切原素或部件上。

之上便是详细说明vue中的axios和slot的详尽內容,大量有关vue axios和slot的材料请关心其他类似文章!