vue2-代理服务器&插槽

解决跨域问题

配置代理服务器

代理服务器位于前端应用(客户端)和真实的后端服务器之间。当配置了代理服务器后，前端应用的请求不再直接发送到后端服务器，而是发送到代理服务器。代理服务器在接收到请求后，会根据预先配置的规则将请求转发到真正的后端服务器。例如，在 Vue 项目的开发服务器配置中，如果前端应用的请求路径是以/api开头，代理服务器可以将这个请求转发到http://backend - server - address对应的后端服务器上

cli文档

方式一:只能配置一个代理，不能灵活配置走不走代理

优点：配置简单，请求资源时直接发给前端(8080)即可。

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

工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 (优先匹配前端资源)
js 复制代码
```
// vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 开启代理服务器
  devServer:{
    // 开启8888端口的代理
    proxy:"http://localhost:8888"
  }
})
```

方式二:可以配置多个代理，可以灵活配置走不走代理

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

缺点：配置略微繁琐，请求资源时必须加前缀。

js 复制代码

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,


  devServer:{
    proxy:{
      // 如果请求的前缀带api，则触发该代理转发，否则不触发代理转发
      // http://localhost:8888/前缀/xxxxxxx
      "/api":{
        // 转发的服务器
        target:"http://localhost:5001",
        // 是否重写路径 {"正则规则":""} ,如果不写 默认以带前缀的url进行请求，http://localhost:5001/前缀/xxxxxxx
        // 使用正则把前缀替换为空，则请求URL 不带前缀 ,http://localhost:5001/xxxxxxx
        pathRewrite:{"^/api":""},
        ws:true, // 用于支持websocket
        changeOrigin:true // 用于控制请求头中的host值 是转发服务器地址还是真实服务器地址


}

    }
  }
})

插槽

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

默认插槽

默认插槽一个组件如果有多个，有多少个插槽，数据会重复多少份(插槽数*插槽数的数量的重复)

html 复制代码

<!-- Category组件(子组件)-->
<template>
  <div class="box">
    <h1>{{ title }}</h1>
    <ul>
      <li v-for="(data,index) of dataList" :key="index">{{ data }}</li>
    </ul>
    <!-- 定义一个插槽 -->
    <slot></slot>
  </div>
</template>

html 复制代码

<!-- App组件(父组件) -->
    <Category title="1" :dataList="[1,2,3]">
      <!-- 在组件标签内写对应内容，会显示在子元素slot插槽定义的地方-->
      <!-- 如果要给插槽的代码设置样式，设置父组件内-->
      <h2>哈哈哈哈</h2>
    </Category>

具名插槽

一个组件可以有多个具名插槽，会根据名字插入代码

子组件

html 复制代码

<!-- 子组件定义一个插槽,名字是h1Text -->
    <slot name="h1Text"></slot>

父组件使用slot

html 复制代码

<!-- 父组件在指定名字插槽插入代码-->
   <Category title="1" :dataList="[1,2,3]">
     <!--在name= h1Text的插槽里面插入代码-->
     <!-- 如果插槽名字是表达式or变量-->
      <h2 slot="h1Text">哈哈哈哈</h2>
    </Category>

父组件使用v-slot

html 复制代码

<!-- v-slot指定插槽，只能在 template 标签使用-->
<Category title="1" :dataList="[1,2,3]">

    <template v-slot:h1Tet>
        <h2 slot="h1Text">哈哈哈哈</h2>
   </template>
</Category>

作用域插槽

数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。(数据在子组件中，但使用数据所遍历出来的结构由父组件决定)

子组件

vue 复制代码

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Category",
  data() {
    // 定义了一个dataList数组
    return {"infoList": [1, 2, 3, 4, 5]}
  }

}
</script>

<template>
  <div class="box">
    <!--   定义插槽，将dataList传递给插槽的使用者 -->
    <slot v-bind:infoList="infoList" name="context"></slot>
  </div>
</template>

父组件

html 复制代码

<template>
  <div class="container">
    <Category>
      <!--      作用域插槽必须使用template标签 -->

      <!--    vue2.6废弃了slot-scope  -->
      <!--    vue2.5废弃了scope  -->
      <!--       v-scope -->
      <!-- vue2.6以上使用v-slot:插槽名字="要使用的数据" -->
      <template v-slot:context="infoList">
        <!--  这里收到的数据是一个对象 {infoList:[xxxxxxx]}-->
        <ul>
          <li v-for="(info,index) of infoList.infoList" :key="index">{{ info }}</li>
        </ul>
      </template>
    </Category>


  </div>
</template>