一、vue脚手架配置代理(2种)（借用vue-cli来开启代理服务器）
跨域（浏览器发送请求给服务器，服务器把数据给了浏览器，但是浏览器因为有同源策略，所以没有得到数据）以及解决方案（常见的有两种）
1、cors:这种方法不需要前端人员进行操作，是需要后端人员在服务器里面加几个响应头，携带了一些特殊的响应头。
2、jsonp:利用 script 标签里面src属性，在引入外部资源时，不受同源策略限制（这种方法不常用，需要前后端一起，并且只能处理get请求，post、delete请求都不能解决）
3、配置一个代理服务器（常用）：服务器与服务器之间传数据不用ajax，没有同源策略的限制。
// 方法一
在vue.config.js中添加如下配置：
devServer:{
proxy:"http://localhost:5000"
}
说明：
1. 优点：配置简单，请求资源时直接发给前端（8080）即可。
2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端
资源）
// 方法二
编写vue.config.js配置具体代理规则：
module.exports = {
devServer: {
proxy: {
'/api1': {// 匹配所有以 '/api1'开头的请求路径（请求前缀）
target: 'http://localhost:5000',// 代理目标的基础路径
changeOrigin: true,
// 重新写路径，匹配所有以api1开头的路径，然后把它变成''，只有这样，才能让代理服务器向真正服务器发送请求的时候不带'api1'
pathRewrite: {'^/api1': ''}
},
'/api2': {// 匹配所有以 '/api2'开头的请求路径
target: 'http://localhost:5001',// 代理目标的基础路径
changeOrigin: true,
pathRewrite: {'^/api2': ''}
}
}
}
}
changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
changeOrigin默认值为true
说明：
1. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
2. 缺点：配置略微繁琐，请求资源时必须加前缀。
下载axios：npm i axios
引入：import axios from 'axios'
// vue.config.js文件
module.exports = {
pages: {
index: {
//入口
entry: 'src/main.js',
},
},
lintOnSave:false, //关闭语法检查
//开启代理服务器（方式一）
devServer: {
// (vue-cli文档里面有相关代码，代理服务器需要向5000端口号的服务器发送请求)
proxy: 'http://localhost:5000'
},
//开启代理服务器（方式二）
devServer: {
proxy: {
'/atguigu': {
target: 'http://localhost:5000',//只写到端口号
pathRewrite:{'^/atguigu':''},
// ws: true, //用于支持websocket（客户端和服务器之间的一种通信方式）
// changeOrigin: true //用于控制请求头中的host值
},
'/demo': {
target: 'http://localhost:5001',//只写到端口号
pathRewrite:{'^/demo':''},
// ws: true, //用于支持websocket
// changeOrigin: true //用于控制请求头中的host值
}
}
}
}
// main.js文件
<template>
<div>
<button @click="getStudents">获取学生信息</button>
<button @click="getCars">获取汽车信息</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
name:'App',
methods: {
getStudents(){
// 第二种方法的代理
// axios.get('http://localhost:8080/api1/students').then(
// 此时应该向代理服务器发送请求，所以端口号为8080
axios.get('http://localhost:8080/api1/students').then(
response => {
console.log('请求成功了',response.data)
},
error => {
console.log('请求失败了',error.message)
}
)
},
getCars(){
axios.get('http://localhost:8080/demo/cars').then(
response => {
console.log('请求成功了',response.data)
},
error => {
console.log('请求失败了',error.message)
}
)
}
},
}
</script>
二、插槽
1. 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件===>子组件。
2. 分类：默认插槽、具名插槽、作用域插槽
3. 使用方式：
1. 默认插槽：
```vue
父组件中：
<Category>
<div>html结构1</div>
</Category>
子组件中：
<template>
<div>
<!-- 定义插槽 -->
<slot>插槽默认内容...</slot>
</div>
</template>
```
2. 具名插槽：
```vue
父组件中：
<Category>
<template slot="center">
<div>html结构1</div>
</template>
<template v-slot:footer>
<div>html结构2</div>
</template>
</Category>
子组件中：
<template>
<div>
<!-- 定义插槽 -->
<slot name="center">插槽默认内容...</slot>
<slot name="footer">插槽默认内容...</slot>
</div>
</template>
```
3. 作用域插槽：
1. 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）
2. 具体编码：
```vue
父组件中：
<Category>
<!-- 外侧必须用<template></template>包裹 -->
<!-- 添加scope属性，属性值自己定义 -->
<template scope="scopeData">
<!-- 生成的是ul列表 -->
<ul>
<li v-for="g in scopeData.games" :key="g">{{g}}</li>
</ul>
</template>
</Category>
<Category>
<template slot-scope="scopeData">
<!-- 生成的是h4标题 -->
<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
</template>
</Category>
子组件中：
<template>
<div>
<slot :games="games"></slot>
</div>
</template>
<script>
export default {
name:'Category',
props:['title'],
//数据在子组件自身
data() {
return {
games:['红色警戒','穿越火线','劲舞团','超级玛丽']
}
},
}
</script>
```
// 默认插槽（在父组件里面的子组件上面增加内容）
// 子组件
<template>
<div class="category">
<h3>{{title}}分类</h3>
<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
<slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
</div>
</template>
// 父组件
<template>
<div class="container">
// 使用子组件Category
<Category title="美食" >
<img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
</Category>
</div>
</template>
// 具名插槽（具有名字的插槽）
// category子组件
<template>
<div class="category">
<h3>{{title}}分类</h3>
<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
<!-- 给slot标签添加name属性 -->
<slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现1</slot>
<slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现2</slot>
</div>
</template>
// 父组件
<template>
<div class="container">
<Category title="美食" >
<img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
<a slot="footer" href="http://www.atguigu.com">更多美食</a>
</Category>
</div>
</template>
注意：如果有<template>标签，可以使用<template v-slot:footer><template/>
// 作用域插槽：它允许子组件向父组件传递数据，从而实现更灵活的组件交互。作用域插槽通过在子组件中
//使用<slot>元素的v-bind指令来传递数据（v-bind指令绑定数据）
// 传给插槽的使用者
<template>
<div>
<slot :games="games"></slot>
</div>
</template>
