首页 > 其他分享> 文章详细

跨域以及数据请求

2021-04-10 00:02:25 阅读：129 来源： 互联网

标签：跨域 service 插槽 export 组件数据传值请求

文章目录

==拦截器的封装==
- ==数据交互的请求==【api文件夹】
- - ==解决跨域==

一：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’: ‘’
}}
}
}
}

标签：跨域,service,插槽,export,组件,数据,传值,请求
来源： https://blog.csdn.net/qq_45903009/article/details/115561837

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9