Vue从入门到精通—— 第四章 Vue 中的 ajax

1.解决解决开发环境 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,//用于控制请求头中的host值
        pathRewrite: {
    
    '^/api1': ''}//去除请求前缀
      },
      '/api2': {
    
    // 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:5001',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {
    
    '^/api2': ''}
      }
    }
  }
}
/*
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
   changeOrigin默认值为true
*/

2.插槽

1. 作用： 让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。

2. 分类：默认插槽、具名插槽、作用域插槽

3. 使用方式：

   1. 默认插槽：

父组件中：
	<Category>
		<div>html结构1</div>
	</Category>
子组件中：
	<template>
		<div>
			<!-- 定义插槽 -->
	        <slot>插槽默认内容...</slot>
        </div>
    </template>

2. 具名插槽：

父组件中：
   <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. 具体编码：

      扫描二维码关注公众号，回复： 14651107 查看本文章

         父组件中：
         		<Category>
         			<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>