这是我参与11月更文挑战的第28天，活动详情查看：2021最后一次更文挑战
slot
具名插槽
- 组件模板中有几个slot，标签中的内容就会挨个的渲染到对应的slot
- 默认的标签中的内容会被渲染至名字为default的slot中，没有name属性的slot默认名字为default
- 如果想要指定slot插入，就需要给slot起名字，如下代码
1.给slot起名字
<slot nam="自定义名字"></slot>
2.使用的时候有两种方式
<span slot="自定义名字"></span> //这种是以前的写法
<template v-slot:自定义名字></template>//这种是官方废弃上边方法之后新的写法，这种写法必须写在template中
- v-slot的简写是#，所以上面第二种方法可以写成如下：
<template #自定义名字></template>
作用域插槽
- 组件封装者，可以在封装组件时，在slot上留下自己的数据，形式如下
<slot key="value"></slot> - 组件使用者，可以通过相关的操作获取到留在slot上的数据，形式如下
<template v-slot="自定义变量名">
//这个变量是一个对象，对象中包含了创建组件时slot所有的key:value
</template>
<template v-slot={x,y}></template> //不想定义变量名也可以用结构赋值的方法来获取key:value
axios拦截器
- axios分为请求拦截器和相应拦截器
请求拦截器
- 当我们想要给请求同意添加某些内容（header，get,post）的时候我们就可以使用请求拦截器,用法如下
axios.interceptors.request.use(config =>{
//在return前我们可以对config进行一些操作
//比如header中添加数据
config.header.key='value'
//params中添加数据（GET DELETE）
config.params.key = 'value'
//data中添加数据（POST PUT PATCH）
config.data.key = 'value'
return config
},err => Promise.reject(error))
响应拦截器
- 当我们想要同意处理所有请求回来的结果时候就可以使用响应拦截器，具体的写法如下
axios.intereptors.response.use(res => {
retrun res
},err =>{
//这里可以和后台商量返回什么状态码，比如401等等
//通过判断返台返回的数据中对应的code值来实现对应的报错
})
//如果后台没有传任何的报错信息
axios.intereptors.response.use(res =>{
//判断res.data.res_code的值来进行不同的提示
return res
},err =>{
})
总结
今天总结的solt和interceptors在前端开发中还是很重要的当你封装组件和使用别人的组件的时候都可能会用到slot。在项目中封装request请求的时候也一定会用到interceptors。
