跨域以及数据请求

一：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

• 数据交互的请求【api文件夹 】

// 引入拦截器
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’: ‘’
}}
}
}
}