文章目录
一:emit
1·1:概念
子组件给父组件进行传值被叫做逆向传值
【但在一般情况下,逆向传值是不允许的,所以必须要有事件触发才能传值】
1·2:逆向传值的流程
-
逆向传值必须通过事件来调用
-
在事件方法中使用$emit()来抛出自定义事件
-
在子组件被调用的地方(父组件)使用@自定义事件名=“父组件的函数—不加()”
-
在调用的函数中有个形参就是逆向传值的数据
子组件:
<template>
<div>
<h1>我们要做的就是逆向传值</h1>
<!-- 逆向传值必须通过事件触发 -->
<button @click="fun()"></button>
</div>
</template>
<script>
export default {
data() {
return{
num: 1234567890
}
},
methods: {
fun() {
// 语法:this.$emit("名字",参数)对值就行抛出
this.$emit("sonvalue", this.num);
},
},
};
</script>
<style scoped>
</style>
父组件:
<template>
<div>
<h2>我们一起来接受儿子给我们的礼物吧</h2>
<Son @sonvalue="fun"/>{{num}}
</div>
</template>
<script>
import Son from './1reverseson.vue'
export default {
components:{
Son
},
data(){
return{
num:""
}
},
methods:{
fun(val){
this.num=val
}
}
}
</script>
二·slot插槽
2·1:为什么有插槽?
问:组件的本质是自定义标签,那么是否可以在组件的开关标签中写内容
解:默认情况下,写的内容是不显示的,所以我们要是想在组件的开关标签内写内容就必须通过插槽
2·2:插槽和props的使用区别
- 内容不同 数量也不相同的时候可以使用slot
- 内容不同 数量相同的时候使用props
2·3:默认插槽:
就是在组件中通过来定义
在组件被调用的时候就可以向内部传入显示的内容
2·4:具名插槽
创建的时候使用
使用的时候,在插入的dom元素上,使用slot属性插入 标题1
子组件:
<template>
<div>
<slot name="hello"></slot>
</div>
</template>
<script>
export default {
}
</script>
父组件:
<template>
<div class="father">
<h5>hahahah</h5>
<Son>
<h6>小朋友</h6>
<p slot="hello">大盆友</p>
<h6>没盆友</h6>
</Son>
</div>
</template>
<script>
import Son from "./2soltdefaultS.vue";
export default {
components: {
Son,
},
};
</script>
三.数据交互
3·1:传统的axios回顾下
3·2:跨域:
是浏览器的同源策略 同端口,同域名,同协议
3·3:代理跨域
问:为什么我们npm run serve 项目之后我们就可以在浏览器输入localhost:8080就能打开项目呢?
解:因为在vue的脚手架中有一个内置的小服务器叫 devServer
代理跨域:就是由这个devServer这个小服务器帮助我们来发送数据请求 没有了浏览器就没有了同源策略就没有了跨域
3·4:解决跨域的数据请求
【小知识】@相对于src的路径,export default暴露的不需要解构赋值,export暴露的要解构赋值
- 在util文件夹里,写的一般都是工具函数封装
拦截器的封装
import axios from "axios"
// 创建axios 赋值给常量service
const service = axios.create();
// 添加请求拦截器(Interceptors)
service.interceptors.request.use(function (config) {
// 发送请求之前做写什么
return config;
}, function (error) {
// 请求错误的时候做些什么
return Promise.reject(error);
});
// 添加响应拦截器
service.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
export default service
// 引入拦截器
import service from "@/util/service.js"
export let getlink=(url)=>{
return new Promise((resolve,reject)=>{
service.request({
url,
methods:"get"
}).then((ok)=>{
resolve(ok)
}).catch((err)=>{
reject(err)
})
})
}
-
在组件中使用
<template> </template> <script> import {getlink} from "@/api/getapi.js" export default { mounted(){ //解决了跨域 getlink("/api/data/cityinfo/101320101.html").then((ok)=>{ console.log(ok) }) } } </script> <style> </style>
- 解决跨域
需要在根目录下创建一个vue.config.js
module.exports={
devServer:{
open:true,//自动开启
proxy: {//解决跨域
'/api': {
target: 'http://www.weather.com.cn', //对应自己的接口
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}}
}
}
}
//解决跨域
‘/api’: {
target: ‘http://www.weather.com.cn’, //对应自己的接口
changeOrigin: true,
ws: true,
pathRewrite: {
‘^/api’: ‘’
}}
}
}
}