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

一、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的资料请关注我们其它相关文章!

(0)

相关推荐

  • vuex+axios+element-ui实现页面请求loading操作示例

    本文实例讲述了vuex+axios+element-ui实现页面请求loading操作.分享给大家供大家参考,具体如下: 前言 我们在平常写项目的时候,发请求的时候肯定会习惯用一个 loading 遮罩层来防止用户在没拿到数据之前误操作 如果是页面同时只发送一个请求,那么无论是在组件中或者是在 axios 插件中进行请求和响应拦截都可以做到 但是,当一个页面同时要发送多个请求的时候,这么做显然就不行了 因为最先完成的请求会把所有请求的 loading 都给关闭 举个例子,第一个请求的响应时间为

  • 如何使用vue slot创建一个模态框的实例代码

    [1]遮罩层:承载内容,管理样式布局. [2]内容层:控制遮罩层的显示与否. 遮罩层和内容区之间应该解耦.遮罩层和内容区之间应该解耦.遮罩层和内容区之间应该解耦. 遮罩层不依赖于内容区,内容是放置在遮罩层里的,至于内容区里的内容是什么,遮罩层完全不用在意.因此可以在遮罩层里采用插槽. 遮罩层的实现 <div class="common-mask" v-if="visible"> <slot name="head"><

  • Vue-axios-post数据后端接不到问题解决

    1 前言 最近在前后端联调的时候发现了一个问题,可能自己平时不注意发送的内容格式,导致解决问题的路上,走了很多弯路,尤其是在刚刚懂了一点Vue知识之后,发送请求的各种花式写法也是让人头大,我在这把我踩到的坑给大家介绍一下吧. 2 问题 这个问题是我前端登录的时候向后端发生post请求.在使用这个接口前,我使用 postman 确认过了几次,接口传参是没有问题的,而且使用params或者body传参都是能接收到的.然而还是报错了--我们先来看看一个截图吧. 我向后端发参数的时候无论如何我都接不到数

  • vue+ts下对axios的封装实现

    虽然vue中axios的使用已经十分方便,但是实际我们的日常操作中可能为了接口的规则一致,来创建一个统一管理的全局方法达到简化操作.而且在实际接口对接中,我们大多都需要对请求和响应进行拦截来进行token以及回调状态码的处理.那么我基于自己的需求简单分装了一下.(之前很少接触vue,主要用的ng和react,这次新项目想用vue来弄,熟悉一下vue的一些新特性和方法,有啥不对的,欢迎大家批评指正) 前提: 熟悉前端ts, node等等. 1. 安装axios npm install axios

  • VUE中使用HTTP库Axios方法详解

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 安装Axios模块 在Vue中使用,最好安装两个模块axios 和vue-axios $npm install axios vue-axios --save 然后引用并使用模块 import Axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios,Axios) 在组件中通过如下方式进行使用 this.$http[meth

  • vue插槽slot的简单理解与用法实例分析

    本文实例讲述了vue插槽slot的简单理解与用法.分享给大家供大家参考,具体如下: vue中插槽的使用非常广泛,本文就插槽的使用和理解简单总结. 从字面理解插槽是预先插入一个代码空间,用于后期塞入数据. 插槽分类 匿名插槽     ------------------   匿名的代码空间 具名插槽     ------------------   带有命名的代码空间 作用域插槽 -------------------   带有数据的代码空间 插槽使用示例 匿名插槽 说明在组件中先定义预留的代码空

  • vue学习笔记之slot插槽用法实例分析

    本文实例讲述了vue slot插槽用法.分享给大家供大家参考,具体如下: 不使用插槽,在template中用v-html解析父组件传来的带有标签的content <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js&q

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

    一.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)) //分发响应 .ca

  • 第一次在Vue中完整使用AJAX请求和axios.js的实战记录

    目录 零.AJAX 0.0 npm install express 0.1 express.js 0.2 GET-HTML 0.3 POST-HTML 一.导入模块 1.1方法一.下载axios.js,并放入vue工程plugins目录下 1.2方法二使用包管理器安装axios 1.3方法三直接引入CDN 二.实际应用 2.1以为和风天气API实践: 2.2数据接口如下: 2.3实现: 2.4完整Vue: 三.BUG修复 3.1 Can‘t resolve ‘axios‘ in ‘C:\vue\

  • 一篇文章带你搞懂VUE基础知识

    目录 VUE是什么 Vue中的核心插件 Vue Router Vuex axios element-ui Vue前端整体架构 总结 VUE是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动. Vue使用了双向数据绑定,即

  • 关于vue中的ajax请求和axios包问题

    在vue中,经常会用到数据请求,常用的有:vue-resourse.axios 今天我说的是axios的post请求 github源文件及文档地址:[https://github.com/axios/axios] + 首先,引入axios CDN: <script src="https://unpkg.com/axios/dist/axios.min.js"></script> npm: npm install axios 并在全局的js中引入:import a

  • vue发送websocket请求和http post请求的实例代码

    先给大家介绍下vue发送websocket请求和http post请求 直接上代码: pdf.vue <script> import SockJS from 'sockjs-client'; import Stomp from 'stompjs'; import qs from "qs" export default { name: "pdf", data() { return { newsData: [], tagGuid_mx: "&quo

  • vue网络请求方案原生网络请求和js网络请求库

    一. 原生网络请求 1. XMLHttpRequest(w3c标准)    // 没有promise时的产物 当时的万物皆回调,太麻烦 2. Fetch    // html5提供的对象,基于promise 因为promise的存在,为了简化网络请求. 使用 Fetch - Web API 接口参考 | MDN Fetch是新的ajax解决方案 Fetch会返回Promise对象.fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象. 参数: 1.第一个参数

  • VUE零基础入门axios的使用

    目录 一.axios是什么 二.axios的特点 三.axios怎么安装 四.在VUE全局挂载 导入 挂载 使用 五.axios便捷方法 六.axios基础方法 七.axios执行结果 八.config axios 配置 九.restFul 九.如何审查元素 一.axios是什么 axios是一款ajax请求工具,是一个用于发送ajax请求的HTTP库,本质上是对AJAX的封装.而且Axios支持 Promise操作, 让我们无需再使用传统callback方式来进行异步编程.(Promise 是

  • Vue基础语法知识梳理下篇

    目录 计算属性 键盘事件 监视属性 绑定样式 class样式 style样式 条件渲染 v-if v-show 列表渲染 v-for指令 vue监测data中的数据 收集表单数据 计算属性 定义:要用的属性不存在,要通过已有属性计算得来 原理:底层借助了Objcet.defineProperty方法提供的getter和setter get函数什么时候执行? (1).初次读取时会执行一次 (2).当依赖的数据发生改变时会被再次调用 注: 计算属性最终会出现在vm上,直接读取使用即可 如果计算属性要

  • Vue 2.0入门基础知识之内部指令详解

    1.Vue.js介绍 当前前端三大主流框架:Angular.React.Vue.React前段时间由于许可证风波,使得Vue的热度蹭蹭地上升.另外,Vue友好的API文档更是一大特色.Vue.js是一个非常轻量级的工具,与其说是一个MVVM框架,不如说是一个js库.Vue.js具有响应式编程和组件化的特点.响应式编程,即保持状态和视图的同步,状态也可以说是数据吧:而其组件化的理念与React则一样,即"一切都是组件,组件化思想方便于模块化的开发,是前端领域的一大趋势. 2.内部指令 2-1.v-

  • vue 组件基础知识总结

    组件基础 1 组件的复用 组件是可复用的Vue实例. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> </style> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <

随机推荐