4.Vue中的AJAX

4.Vue中的AJAX

4.1 解决跨域问题

4.1.1  方法1

在vue.config.js中添加配置

devServer: {
    proxy: 'http://localhost:8090'
  } 

优点：配置简单，请求资源是直接发给前端（8080）即可。

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

工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么请求会自动转发，但是若前端有那么就不会转发。

4.1.1  方法2 

在vue.config.js中添加配置

devServer: {
    proxy: {
      //请求前缀为erp的走代理
      '/test/erp': {
        //转发地址
        target: 'http://localhost:8090',
        pathRewrite:{'^/test':''},//重写地址
        ws: true,//用于支持webstocket，不写默认true
        changeOrigin: true//请求头中的host是否为虚拟地址，不写默认true
      },
      '/demo/erp': {
        //转发地址
        target: 'http://localhost:8090',
        pathRewrite:{'^/demo':''},//重写地址
        ws: true,//用于支持webstocket，不写默认true
        changeOrigin: true//请求头中的host是否为虚拟地址，不写默认true
      },
    }
  }

 changeOrigin: 

        true：服务器收到的host为虚拟的，与服务器地址相同。

        false：服务器收到的host为真实的，与请求地址相同。

        默认为true（react默认为false）。

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

缺点：配置略微繁琐，请求资源必须加前缀。（可以配置路径重写）。

axio，vue-resource

4.2slot插槽

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

（2）分类：默认插槽，具名插槽，作用域插槽。

（3）使用方式：

        （3.1）默认插槽：

                    父组件：                    

<Category>
    <div>HTML结构</div>
</Category>

                    子组件：

<template>
    <div>
        <!--定义插槽-->
        <slot>插槽默认内容....</slot>
    </div>
</template>

        （3.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.3）作用域插槽

                （3.3.1）作用：数组在组件自身，但是数据生成的结构由组件的使用者决定。

                                       （父组件决定结构，子组件提供数据）

                    父组件：

<Category>
    <template slot="scopeData">
        <!--生成ul列表-->
        <ul>
            <li v-for="g in scopeData.games" :key="g">{{g}}</li>
        </ul>
    </template>
    <template slot="scopeData">
       <!--生成h4标题-->
           <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
   </template>
</Category>

                    子组件：

<template>
    <div>
        <!--定义插槽-->
        <slot :games="games">插槽默认内容....</slot>
    </div>
</template>