Vue基础学习笔记（三）
一、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)
})
}
}
这样可以实现发送两个请求，只有所有都成功，才算是成功。只要有一个失败，就算是失败。
二、插槽slot
- 1.基本用法
插槽的出现使得我们可以在使用子组件时在子组件内新增内容，而不仅仅是简单的使用，呈现出多样化的子组件。
<navigation-link>
Your Profile
</navigation-link>
当我们使用子组件navigation时，在子组件中写入一些内容，但是如果我们子组件的template中没有一个插槽slot，那么我们写入的Your Profile没有的地方放，子组件怎么知道要放在哪里呢，不知道放在哪里，所以它就干脆不放了，会把写的内容抛弃，大家就当无事发生过，子组件里怎么写，它就怎么呈现，全然不顾你在使用时写入的东西，当做没有看见。
但是如果我们在子组件中写入了一个插槽slot，那么我们传入的内容将会被在这个插槽处呈现。像下面这样
<a v-bind:href="url" class="nav-link">
<slot></slot>
</a>
渲染出来的结果将是：
<a v-bind:href="url" class="nav-link">
Your Profile
</a>
- 2.具名插槽
有时候，我们需要在子组件中放置多个内容，那么你只有一个slot，它只能全部放在这里（其实我也不知道是不是这样我没有试过），如果你有多个slot，它怎么知道哪个内容要放在哪个slot，按顺序放吗？不是的（其实我也不知道是不是）。正确的做法就是使用具名插槽。所谓具名插槽就是一个带有name的slot。也就是下面这样
<!--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属性的标签，属性值对应slot的name，将内容放到子组件的相应位置上去。
我们注意到，里面有一个没有指定name的slot，它就是默认插槽。所有在使用子组件时传入的东西，只要没有指定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里面，给template加slot咯。
- 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> 元素上使用，而可以用在插槽内的任何元素或组件上。
