Vue第四章Vue中的Ajax：跨域问题、slot插槽

第四章、Vue中的Ajax

一、配置代理（跨域问题）

方法一：

在vue.config.js中添加如下配置：

devServer:{
	proxy:"http://localhost:5000"
}

1、优点：配置简单，请求资源直接发给前端即可

2、缺点：不能配置多个代理，不能灵活的控制请求是否走代理

3.工作方式：若按照上述配置代理（优先匹配前端资源）

方法二：

module.exports = {
    devServer:{
        proxy:{
            '/api1':{//匹配所有以'/api1'开头的请求路径
                target:'http://localhost:5000',
                changeOrigin:true,
                pathRewrite:{'^/api1s:':''}
            },
            '/api2':{//匹配所有以'/api1'开头的请求路径
                target:'http://localhost:5001',
                changeOrigin:true,
                pathRewrite:{'^/api2:':''}
            },
        }
    }
}

1、优点：可以配置多个代理，且可以灵活的控制请求是否走代理

2、缺点：略微繁琐

二、vue-resource（不常用）

npm i vue-resource

import vueResource from 'vue-resource'
Vue.use(vueResource)

三、slot插槽

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

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

3、使用方式：

默认插槽：

父组件中：

	

        html结构1
    

子组件中：

具名插槽：

父组件中：

    
    
    

子组件中：

作用域插槽：

理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（game数据在Category子组件中，但使用数据所遍历出来的结构又父组件App决定）

父组件中：

    



    

子组件中：