4.Vue 中的 ajax和插槽

Vue 中的 ajax和插槽

4.1 解决开发环境 Ajax 跨域问题

使用代理服务器：

​ 在vue-cli里的目录下新建一个vue.config.js文件在里面配置代理服务

module.exports = {
    //只能配置一个代理 优先匹配前端资源
    第一种  只能配置一个代理 
     devServer: {
       proxy: 'http://localhost:3000'
     },
     第二种 可以配置多个代理
    devServer: {
            proxy:{
                '/api': {
                    target: 'http://localhost:3000',
                    ws: true,//用于支持websocket  默认为true
                    changeOrigin: true,//修改主机名  欺骗服务器 请求路径 为了防止别人阻止别的端口请求 默认为true
                    //重写路径 把/api改成空
                    pathRewrite: {
                        '^/api': ''
                    }
                },
                //可以配置多个代理
                '/demo':{
                    target:'http://localhost:3001',
                    ws:true,
                    changeOrigin:true,
                    pathRewrite:{
                        '^/demo':''
                    }
                }
            }
        }
}

4.2 vue 项目中常用的 2 个 Ajax 库

4.2.1 axios

​ 通用的 Ajax 请求库, 官方推荐，使用广泛

4.2.2 vue-resource

​ vue 插件库, vue1.x 使用广泛，官方已不维护。

4.4 slot 插槽

4.4.1 理解

​ 父组件向子组件传递带数据的标签，当一个组件有不确定的结构时, 就需要使用slot 技术，注意：插槽内容是在父组件中编译后, 再传递给子组件的。

4.4.2 分类

1. 默认插槽

   App(父组件) Son(子组件)

   在App中
   
   在中
   
   	
   

2. 具名插槽

   在App中
   
   在中
   作用域插槽
   

3. 作用域插槽

   在App中
   
   在中