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 相关文章推荐
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
javascript 回调函数详解
Nov 11 Javascript
详解JavaScript对象序列化
Jan 19 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
dul无法加载bootstrap实现unload table/user恢复
Sep 29 Javascript
Vue.js常用指令汇总(v-if、v-for等)
Nov 03 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
Mar 15 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
Three.js实现3D机房效果
Dec 30 Javascript
vue中如何添加百度统计代码
Dec 19 Vue.js
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
如何使用脚本模仿登陆过程
2006/11/22 PHP
php下用GD生成生成缩略图的两个选择和区别
2007/04/17 PHP
php修改NetBeans默认字体的大小
2013/07/02 PHP
php版本的cron定时任务执行器使用实例
2014/08/19 PHP
PHP获取服务器端信息的方法
2014/11/28 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
javascript 获取表单file全路径
2009/12/31 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
node.js操作mysql(增删改查)
2015/07/24 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
2015/11/07 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
JS从一组数据中找到指定的单条数据的方法
2016/06/02 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
微信小程序商城项目之购物数量加减(3)
2017/04/17 Javascript
node.js 中间件express-session使用详解
2017/05/20 Javascript
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
Python实现的密码强度检测器示例
2017/08/23 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
python实现UDP协议下的文件传输
2020/03/20 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
美国高端医师级美容产品电商:BeautifiedYou.com
2017/04/17 全球购物
Eclipse面试题
2014/03/22 面试题
打架检讨书100字
2014/01/19 职场文书
创业者是否需要商业计划书?
2014/02/07 职场文书
投标授权委托书范文
2014/08/02 职场文书
毕业典礼邀请函
2015/01/31 职场文书
导游词之峨眉山
2019/12/16 职场文书