vue基础知识--axios合并请求和slot


Posted in Javascript onJune 04, 2020

一、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" rel="external nofollow" rel="external nofollow" class="nav-link">
 <slot></slot>
</a>

渲染出来的结果将是:

<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的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
Notify - 基于jquery的消息通知插件
Oct 18 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
Jul 26 Javascript
jQuery中insertBefore()方法用法实例
Jan 08 Javascript
Node.js制作简单聊天室
Jan 12 Javascript
JavaScript设计模式之建造者模式实例教程
Jul 02 Javascript
JS实现求5的阶乘示例
Jan 21 Javascript
Nuxt.js 数据双向绑定的实现
Feb 17 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
Jun 25 Javascript
vue实现移动端拖动排序
Aug 21 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 Javascript
jQuery实现可以扩展的日历
Dec 01 jQuery
vue webpack build资源相对路径的问题及解决方法
Jun 04 #Javascript
微信小程序学习总结(一)项目创建与目录结构分析
Jun 04 #Javascript
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 #Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 #Javascript
JQuery实现折叠式菜单的详细代码
Jun 03 #jQuery
JavaScript字符和ASCII实现互相转换
Jun 03 #Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 #Javascript
You might like
聊天室php&amp;mysql(五)
2006/10/09 PHP
NOT NULL 和NULL
2007/01/15 PHP
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
php中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
2014/01/14 PHP
PHP中static关键字以及与self关键字的区别
2015/07/01 PHP
PHP中引用类型和值类型功能与用法示例
2019/02/26 PHP
jquery实现微博文字输入框 输入时显示输入字数 效果实现
2013/07/12 Javascript
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
jQuery中ScrollTo用法示例
2016/09/04 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
微信小程序 点击控件后选中其它反选实例详解
2017/02/21 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
2018/03/05 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
koa router 多文件引入的方法示例
2019/05/22 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
[01:56]林书豪DOTA2上海特级锦标赛励志短片
2016/03/05 DOTA
python使用socket远程连接错误处理方法
2015/04/29 Python
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
Python实现批量压缩图片
2018/01/25 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
详解python中的数据类型和控制流
2019/08/08 Python
python中open函数的基本用法示例
2019/09/07 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
python代码如何实现余弦相似性计算
2020/02/09 Python
python中有函数重载吗
2020/05/28 Python
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
Nike墨西哥官网:Nike MX
2020/08/30 全球购物
应届毕业生个人自荐信范文
2013/11/30 职场文书
个人党性锻炼总结
2015/03/05 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书
图文详解matlab原始处理图像几何变换
2021/07/09 Python
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
2023/05/07 HTML / CSS