Vue2(七)配置代理axios、默认插槽、具名插槽、作用域插槽
(3)工作方式:若按照上述配置代理,会优先请求本地资源,若存在同名的本地资源就返回的是本地资源的数据,不再请求服务器的数据。,vue可配置一个代理服务器,将请求的服务器代理到vue的服务器上,从而使得请求数据端口和代理服务器端口同源;在父组件使用插槽根据子组件的数据来渲染内容时,通过插槽prop将子组件数据传到父组件v-slot中。一般情况下,没有被带有v-slot属性的template包裹的内容
目录
(一)配置代理
在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}
更多推荐
所有评论(0)