插槽和axios的封装
插槽 slot
概念
我们可以将共性抽取到组件中，将不同暴露为一个插槽,一旦我们预留了插槽，则内容可以通过父组件的代码来控制，就可以根据我们得需求，决定插槽插入什么样的内容
有了插槽后，我们可以向子组件标签中加入自定义内容，意味着子组件标签必须写双标签
<子组件标签>内容
内容可以是数据、标签等一切内容
作用：
1 减少vue子组件文本个数
2 增加了组件的扩展性
插槽的分类：
1 匿名的插槽
2 具名插槽（用得最多）
3 后备插槽
4 作用域插槽
1 匿名插槽
特点：子组件的插槽没有名字，父组件传递额参数能够进入到子组件中所有匿名插槽中
Father.vue
内容
Son.vue:
2 后备插槽
特点：如果父组件没有传递任何参数，则子组件可以默认一个值
Father.vue
Son.vue:
默认值
3 具名插槽
特点：父组件能够指定对应的内容插入子组件对应的插槽中
Father.vue
值1
值2
Son.vue
简写：
Father.vue
值1
值2
练习
已知：
父组件:
值1
默认值
父组件：
子组件：
4 作用域插槽
特点：值有子组件提供，节点/布局由父组件提供，作用域插槽就是，子组件需要把数据传递给父组件，父组件拿到数据做渲染，最终把结果插入给子组件
4.1 匿名：
Father.vue
Father
编号
姓名
{{item.id}}
{{item.name}}
Son.vue:
Son
4.2 具名插槽
Son.vue:
Son
Father.vue
Father
编号
姓名
{{item.id}}
{{item.name}}
简写：Father.vue
动态组件
概念：组件能够相互切换
语法：
Demo:
特点：
当我们切换组件时，组件会销毁，也就是会执行destroyed钩子函数，因此，可以利用该1钩子函数实现清空定时器等操作，节约内存
keep-alive（经常搭配动态组件）
被该标签包裹的组件不会销毁，能够缓存数据
include : 包含 ---》指定的组件会被缓存
exclude ： 排除 ---》指定的组件不会被缓存
也支持正则：
进入组件和离开组件的钩子函数
前置：必须被keep-alive缓存时才会生效
//进入组件
activated(){
console.log("进入组件");
},
//离开组件
deactivated() {
console.log("离开进入组件");
},
axios
概念
基于promise实现 对ajax的一种封装
局部安装
npm i axios
使用
import axios from 'axios'
get提交：
let res= await axios({
url:'',
method:"get",
params:{
username:"x1",
......
}
})
get提交的简写: let res=await axios.get('地址',{params:{...}})
post提交:
let res= await axios({
url:'',
method:"post",
data:{
username:"x1",
......
}
})
post提交的简写: let res=await axios.post("地址",{....})
面试题：vue中发送ajax是写在created中还是mounted中
答：我选择created
原因：
mounted：页面都挂载完毕后再发送请求，再次拿到数据更改data，最终又渲染了一次----》二次渲染，可能会看到闪屏现象
created:生命周期早于mounted，早点发请求更快处理
关于axios的配置
import axios from 'axios'
let newaxios=axios.create({
//前缀路径
baseURL:"http://localhost:3000",
//如果超时则报错 单位毫秒
timeout:3000
})
let res=await newaxios({
url:"/xxxxx",
......
})
封装axios
步骤1： 把axios对象封装到一个js文件中，然后暴露出去，在main.js中引入并且挂载到全局，将来可以直接在任意组件中通过this.执行
1 src下新建http目录，该目录下新建 axios.js,编辑该js
import axios from 'axios'
let newaxios=axios.create({
// 前缀路径
baseURL:"http://localhost:3000",
timeout:3000
})
//暴露
export default newaxios
2 把newaxios挂载到全局, 找到main.js.并且编辑
//引入Vue构造器
import Vue from 'vue'
//引入入口组件
import App from './App.vue'
//引入axios
import axios from './http/axios.js'
//把asios挂载到vue全局中，放在new Vue的前面
Vue.prototype.$axios=axios
//不会在控制台中出现有关生产模式的提示
Vue.config.productionTip = false
//实例化一个vue对象（挂载入口vue）
new Vue({
render: h => h(App),
})
//把入口vue挂载到index.html中id为app的div
.$mount('#app')
步骤2：把组件中调用ajax的一套代码封装进js在去，以后只需要在组件中通过this.方法就能够调用ajax
1 http目录中新建modules目录，该目录就是用来分别装不同的模块.js(比如users.js),编辑该js文件
//引入自己的axios
import axios from '../axios.js'
//登录
function login(params){
return axios({
url:"/users/login",
method:"get",
params
})
}
//注册
function register(data){
return axios({
url:"/users/register",
method:"post",
data
})
}
export default{
login,register
}
2 在http目录下新建api.js，由于以后有很多模块，因此该js就是用来合并多个模块的，能够使得最终只需要在main.js中全局挂载api这一个js即可 ，编辑api.js
import stus from './modules/stus.js'
import users from './modules/users.js'
export default {
stus,users
}
3 全局挂载api.js ,编辑main.js
//引入Vue构造器
import Vue from 'vue'
//引入入口组件
import App from './App.vue'
//引入axios
// import axios from './http/axios.js'
//引入api
import api from './http/api.js'
//把asios挂载到vue全局中
Vue.prototype.api=api
// Vue.prototype.$axios=axios
//不会在控制台中出现有关生产模式的提示
Vue.config.productionTip = false
//实例化一个vue对象（挂载入口vue）
new Vue({
render: h => h(App),
})
//把入口vue挂载到index.html中id为app的div
.$mount('#app')
使用：以注册为例：
methods:{
//注册
async register(){
let res=await this.api.users.register(this.user)
console.log(res);
}
}