vue-Axios,兄弟通信

117 阅读1分钟

在全面配置中传参数 ☆要使用params 不要使用data

<template>
  <div id="app">
 
  </div>
 
</template>

<script>
 //使用需要先引入axios
 //Axios是一个专注于网络请求的库!
 import axios from 'axios'
export default {
  name:"App",
  
  created(){
    /* .get 和 .post 都是简写 */
    /* 执行 GET 请求 */
     第一种方式:get加参数可以在请求上直接加 
     axios.get('https://cnodejs.org/api/v1/topics?name=zhangsan')
    .then(res=>{
      console.log(res.data)
    })
    
     第二种方式:使用{params:{xxx:xxx}} 
     axios.get('http://timemeetyou.com:8889/api/private/v1/users',{
       params:{
         name:"zhangsan"
       }
     })
     .then(res=>{
       console.log(res.data)
     })
     .catch(err=>{
       console.log(err)
     })
     
     在全面配置中传参数 ☆要使用params 不要使用data 
     axios({
       method: 'get',
       url: 'http://timemeetyou.com:8889/api/private/v1/users',
       headers:{
         'Authorization':'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjUwMCwicmlkIjowLCJpYXQiOjE2NDc1MDg4MDIsImV4cCI6MTY0NzU5NTIwMn0.JOGq-rUx2XFQGp0qpW8PkUyPV-O1VElOheZy2js0FJ8'
       },
       params:{
         pagenum:1,
         pagesize:10
       }
     })
     .then(res=>{
       console.log(res)
     })
     .catch(err=>{
       console.log(err)
     })



   
    /* axios如何使用post请求 */
     axios.post('https://api.shop.eduwork.cn/api/auth/login',{
       email:"super@a.com",
       password:"123123"
     })
     .then(res=>{
       console.log(res)
     })
     .catch(err=>{
       console.log(err)
     })
     
    使用全面配置的方式 发送post请求 
    axios({
       method: 'post',
       url: 'http://timemeetyou.com:8889/api/private/v1/login',
       data: {
         username:"admin",
         password:"123456"
       }
     })
     .then(res=>{
       console.log(res)
     })
  }
}
</script>

<style>

</style>
  • 使用$emit方法,兄虎A向兄弟B传值
  • 兄弟之间组件通信,需要使用$on方法值用回调函数 image.png image.png

image.png 在父组件可以通过refs方法获取子组件的值与this.refs方法获取子组件的值与this.children[0]是一样

image.png