Vue2（七）配置代理axios、默认插槽、具名插槽、作用域插槽

目录

(一)配置代理

1.方式1 

说明 

2.方式2

说明

(二)插槽

1.默认插槽

2.具名插槽

3.作用域插槽

(一)配置代理

在vue内安装axios库：npm i axios

打开服务器，访问发送学生数据

// 一个简单传数据的服务器
const express = require('express')
const app = express()
app.get('/student', (request, response) => {
    const studata = [
        { key: '001', name: 'csq', age: 20 }, 
        { key: '002', name: '狗蛋', age: 18 }
    ]
    response.send(studata)
})

app.listen(5000, () => {
    console.log("服务已经启动，5000端口正在监听中...");
})

为了解决同源策略问题，vue可配置一个代理服务器，将请求的服务器代理到vue的服务器上，从而使得请求数据端口和代理服务器端口同源；

可见官方文档：配置参考 | Vue CLI

1.方式1 

在vue.config.js文件内写入

// 开启代理服务器
devServer: {
    proxy: 'http://localhost:5000'
}

 随后在vue内直接使用即可

getStuData() {
    axios.get('http://localhost:8080/student').then(
        (response) => {
            console.log(response.data)
        },
        (error) => {
            console.log("服务器访问失败", error.message);
        }
    )
}

说明 

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

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

（3）工作方式：若按照上述配置代理，会优先请求本地资源，若存在同名的本地资源就返回的是本地资源的数据，不再请求服务器的数据

2.方式2

vue.config,js配置：

devServer:{
// 开启代理服务器 方式二
    proxy: {
        '/csq': { //匹配所有以/csq开头的请求路径
            target: 'http://localhost:5000', // 代理目标的基础路径
            pathRewrite:{'^/csq':''}, // 将路径中的/csq替换为空，才能访问到目标服务器的数据
            ws: true, // 用于支持websocket
            changeOrigin: true // 用于控制请求头的host值
        },
        '/foo': { //匹配所有以/foo开头的请求路径
            target: 'http://localhost:5001',
            pathRewrite: { '^/foo': '' },
            // 其余两个配置不写则默认为真
        }
    }
}

这种写法可以配置多个服务器端口

getStuData() {
    axios.get('http://localhost:8080/csq/student').then(
        (response) => {
            console.log(response.data)
        },
        (error) => {
            console.log("服务器访问失败", error.message);
        }
    )
}

如果不写pathRewrite，代理服务器就会把/csq/student传给5000端口，导致服务器接收不到正确的请求头

说明

（1）优点:可以配置多个代理，且可以灵活的控制请求是否走代理

（2）缺点:配置略微繁琐，请求资源时必须加前缀

(二)插槽

作用：父组件可以向子组件的指定位置插入一段html结构，用于组件复用更加灵活

1.默认插槽

一般情况下，没有被带有v-slot属性的template包裹的内容都视为默认插槽的内容

父组件中：
<Category>
    <!-- 默认插槽 -->
    <h1>这里是目录</h1>
</Category>

子组件中：
<!-- 默认插槽 -->
<slot></slot>

 也可以写成被template包裹的形式

<Category>
    <template v-slot:default>
        <h1>这里是目录</h1>
    </template>
</Category>

2.具名插槽

slot元素具有name属性用来标识要插入的内容，正所谓一个萝卜一个坑

父组件中：
<Category>
    <!-- 具名插槽 -->
    <template v-slot:content>
        <p>这里是内容</p>
    </template>

    <!-- 具名插槽 简写形式 -->
    <template #content2>
        <p>这里是内容2</p>
    </template>
</Category>

子组件中：
<!-- 具名插槽 -->
<slot name="content"></slot>

3.作用域插槽

作用：当数据在子组件时，根据组件使用者调用数据来决定如何使用数据；在父组件使用插槽根据子组件的数据来渲染内容时，通过插槽prop将子组件数据传到父组件v-slot中

(1)作用域匿名插槽 

父组件中：
<Category>
    <!-- 作用域匿名插槽 -->
    <template v-slot:default="slotProps">
        <ul>
            <li v-for="(h, index) in slotProps.hobby" :key="index">
                {{ h }}
            </li>
        </ul>
    </template>
</Category>

子组件中：
<!-- 作用域插槽 默认插槽 -->
<slot :hobby="hobby"></slot>

(2)作用域具名插槽

父组件中：
<Category>
    <!-- 作用域具名插槽 -->
    <!-- <template v-slot:data="slotProps">
        <ul>
            <li v-for="(h, index) in slotProps.hobby" :key="index">
                {{ h }}
            </li>
        </ul>
    </template>
</Category>

子组件中：
<!-- 作用域插槽 默认插槽 -->
<slot :hobby="hobby"></slot>

在父组件获取到的是包含所有插槽 prop 的对象，数据包裹在其中，故slotProps可以直接写成{hobby}