Vue（九）http-proxy 跨域、插槽 slot

目录

一、http-proxy跨域

二、插槽（slot）

一、http-proxy跨域

        旧的跨域方式无论 CORS 还是 JSONP，都要求助于后端才能跨域，对于前端工程师来说都较为繁琐；而使用 vue 脚手架开发时，就可以用 http-proxy 跨域。

        http-proxy 跨域是一种纯前端跨域方式，请其他程序代替 ajax 发送请求。

使用方法：

（1）在脚手架根目录的 vue.config.js 文件中，再配置一个代理程序；

 module.exports={
    ... ...
    devServer: {
      proxy: {
        '/': {
          target: `http://服务器端接口地址统一前缀部分`,
          changeOrigin: true,
        }
      }
    }

（2）配置代理程序后，main.js中 就不用再配置 axios.defautls.baseURL 了；

（3）重启 npm run serve。

小结（高频笔试面试）：

        跨域方式共有3种：cors、jsonp、http 代理；

        前端工程师最常用的方式：http 代理；

        如果不用 ajax，还能怎么发请求：(1) jsonp 的 <script>；(2) Vue 脚手架的 http-proxy 代理方式跨域。

二、插槽（slot）

        在程序中有如多个提示框布局风格一致只是内部内容不同的情况，为了避免重复编写代码，就可以用到插槽。

        插槽就是组件中一块可动态改变 HTML 片段内容的区域，今后编程中如果有多个组件，拥有相同的结构框架，只是内部 HTML 片段有不同时就都应该使用插槽。

插槽的使用（以对话框举例来了解插槽的过程）：点击按钮后页面分别弹出对应的对话框

1. 先定义一个组件包含统一的外壳结构

        新建一个外壳组件，将任意一个现有对话框代码整体复制到组件中，删除组件中将来可能发生变化的大片 HTML 片段位 置，并用标签占位组件中个别可能变化的文本，改为绑定语法，并在 props 成员中添加外来属性。 

2. 再在每次使用组件时，动态改变组件中插槽 区域的HTML片段内容

        2.1 在原对话框中引入带插槽的外壳组件

import Waike from "./Waike"
export default {
 … …,
 components:{ Waike },
 … …
}

        2.2 在组件上添加外壳组件标签

        2.3 在外壳组件内添加，其中添加对话框独有内容

具名插槽：

        如果一个带插槽的外壳组件，将来有多个部位可能会改变，这个时候就用具名插槽。它可以将不同的 HTML 片段， 插入不同的插槽中。

        如果一个带插槽的外壳组件包含多个具名插槽，则使用时每个插槽对应的 HTML 片段，都要放在 <template v-slot:插槽名> 中，可简写为 <template #插槽名>。