4.Vue 中的 ajax和插槽

发布时间:2023-06-19 09:00

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中
    
    

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号