vue2-组件和前后端交互模式

发表于 | 分类于 ， ， ， ， | 本文总阅读量 次
字数统计: 1.7k | 阅读时长 ≈ 6

组件

注意事项：

  • data必须返回一个函数（保证每个组件的数据是相互独立的）
  • 组件的模板必须是只有一个根元素
  • 组件模板内容可以是模板字符串（内容复杂，增强代码可读性）
  • 组件命名方式：驼峰式和中间-式如果使用驼峰式命名组件，那么在使用的时候，只能在字符串模中（定义的时候）用驼峰的方式使用组件，但是在普通的标签模板中（使用的时候），必须使用短横线的方式使用组件
  • 全局组件中不能使用局部组件，局部注册的组件只能在它注册了的父组件中使用
  • 组件内部使用props数组接收父组件传递过来的值，该传递的值需要在父组件中利用属性绑定来进行传递当然也可以用写死的属性值，但是我们一般都用动态绑定的属性值。
  • 在props中使用驼峰方式，在模板中使用的时候需要使用短横线方式（因为浏览器DOM不区分大小写），就是说定义的时候可以使用驼峰式，使用时候必须短横线
  • 在模板字符串中props属性传值没有这个限制

props属性值类型

  • 字符串
  • number，如果希望是原始数据类型的话，那么父组件传值的时候需要使用属性绑定，不适用属性绑定就是一般的字符串类型
  • 布尔值 （去掉：就是字符串类型，加上就是布尔值，跟number一样）
  • 数组
  • 对象

子组件向父组件传值

  • props传递数据是单向数据流
  • 子组件给点击事件添加一个$emit的自定义事件
  • 父组件中需要监听这个事件，所以直接事件绑定事件名称，然后后面是事件逻辑
  • 名称要保持一致，函数方法逻辑是在父组件的methods里面定义的，然后是由子组件来进行触发，父组件进行监听
  • 子组件传递过去的参数，在父组件中使用$event来进行传递，就是正常的传值规律

非父子组件间传值

  • 单独的事件中心管理组件间的通信（自定义一个vue实例）var hb = new Vue()
  • 该事件中心进行监听事件和销毁事件hb.$on('add',add),hb.$off('add')
  • 该事件中心再来进行触发事件hb.$emit('add',id)

组件插槽

1、 作用
父组件向子组件传递内容（传递的是模板中的内容）
2、位置：位于子组件的模板中
3、插槽内容：通过模板标签，将需要传递的内容放置在模板标签中，进行传递，这样传递的内容就会在插槽的位置进行显示。
4、相当于给传递内容预留了一个位置
5、作用域插槽：应用场景：父组件对子组件的内容进行相关加工处理；一般用在v-for里面，在v-for里面添加一个slot语句，在里面绑定一个属性对其进行操作，最后在使用的时候，使用template标签进行包裹

前后端交互

接口调用方式：

  • 原生ajax
  • 基于jquery的ajax
  • fetch
  • axios

url地址形式：

  • 传统的url地址协议
  • restful形式的url

注意：前端渲染和服务端渲染的区别，前后端交互在vue里面指的是前端渲染。

Promise

  • 实例化Promise对象，构造函数中传递函数，该函数中用于处理异步任务
  • resolve和reject两个参数用于处理成功和失败两种情况，并通过p.then获取处理结果
  • 一个then是一次请求（包括成功和失败）

then参数中的函数返回值

  • 返回Promise实例对象
    • 返回的该对象实例会调用下一个then（如调用多个ajax）
  • 返回普通值
    • 返回的普通值会直接传递给下一个then，通过then参数中函数的参数接收该值，也就是下一个then直接调用上一个return的结果

Promise常用的API

  • 实例方法
    • p.then()得到异步任务的正确结果
    • p.catch()获取异常信息
    • p.finally()成功与否都会执行（尚且不是正是标准）
  • 对象方法
    • Promise.all()并发处理多个异步任务，所有任务都执行完成才能得到结果
    • Promise.rece()并发处理多个异步任务，只要有一个任务完成就能得到结果

fetch接口用法

基本概述

  • 基本特性
    • 更加简单的数据获取方式，功能更强大、更灵活、可以看作是xhr的升级版
    • 基于Promise实现
  • 语法格式：
    1
    2
    3
    4
    fetch(url).then(fn2)
              .then(fn3)
              ...
              .catch(fn)

text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
常用配置选项：

  • method（string）：HTTP请求方法，默认为GET（GET、POST、PUT、DELETE）
  • body（string）：HTTP的请求参数
  • headers（Object）：HTTP的请求头，默认为{}

响应结果

数据格式：

  • text():将返回体处理成字符串类型
  • json()：将返回结果和JSON.parse(response.Text)一样

axios

是一个基于Promise用于浏览器和Node.js的HTTP客户端
它具有如下特性：

  • 支持浏览器和node.js
  • 支持promise
  • 能拦截请求和响应
  • 自动转换JSON数据

获取的数据是通过.dat来获取的，并且该属性是确定的。

常用API

  • get： 查询数据
    • 通过url传参，获取的时候使用query.id
    • 通过params传参，获取的时候使用params.id
  • post：添加数据
    • 通过选项传递参数（默认传递的是json格式的数据），获取使用body属性
    • 通过URLSearchParams传递参数
  • put：修改数据
    • 传参方式和post相似
  • delete：删除数据
    • 传参方式和get相似

响应结果

  • data：实际响应回来的数据（可以直接当作对象来使用）
  • headers：响应头消息
  • status： 响应状态码
  • statusText：响应状态信息

全局配置

  • axios.defaults.timeout = 3000; //超时时间
  • axios.defaults.baseURL = ‘http:.localhost:3000/app’; //默认地址，设置请求的基准地址
  • axios.defaults.headers[‘mytoken’] = ‘aaaa’;//设置请求头

拦截器就相当于过滤器的作用。

async/await

基本用法

  • 是ES7引入的新语法，可以更加方便的进行异步操作
  • async关键字用于函数上（async函数的返回值是Promise实例对象）
  • await关键字用于async函数当中（await可以得到异步的结果）
-------------本文结束感谢您的阅读-------------