Vue怎么使用axios发送请求

本文小编为大家详细介绍“Vue怎么使用axios发送请求”，内容详细，步骤清晰，细节处理妥当，希望这篇“Vue怎么使用axios发送请求”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

例：当我们在APP组件的子组件UserLogin组件中写到登录函数：

    login(){
      console.log('登录')
      let params = {
        userAccount: UserInfo.userAccount,
        password: UserInfo.password
      }
      // 防止闭包找不到data元素的调用
      let that = this 
      API.login(params).then(
        function (res) {
          // res.data = res
          if (res.code == 1) {
            that.userAccount = params.userAccount
            that.authority = 1
            that.loginWord = false
            that.SystemFrom(0)
          }
          else
            that.SystemFrom(1)
        }
      },

这时的登录函数是没办法在子组件内部进行运行的。也就是我跑起来之后是没办法通过登录按钮进行访问服务器接收数据的。

这里我将这行代码放进我们的APP组件中就成功的实现了数据的访问与接收。但是这涉及到子组件与父组件的数据通信的方式：上次说道this.$emit('父组件在子组件上绑定的方法名')可以实现子组件调用父组件的方法，而在父组件调用子组件时如果有<login name=' params '>就可以在子组件内的props:[' name']对该参数进行接收，之后的处理都是以name进行操作的，那么我们其实也可以将其变成一个函数就可以直接在子组件内部调用父组件的函数了。

父组件相关代码：

    <div v-if="loginWord === true">
      <login @close="closeL" :startLogin="startLogin"></login>
    </div>
    //以下是methods内部
    // 登录请求发起
    startLogin(UserInfo){
      console.log('登录')
      let params = {
        userAccount: UserInfo.userAccount,
        password: UserInfo.password
      }
      // 防止闭包找不到data元素的调用
      let that = this 
      API.login(params).then(
        function (res) {
          // res.data = res
          if (res.code == 1) {
            that.userAccount = params.userAccount
            that.authority = 1
            that.loginWord = false
            that.SystemFrom(0)
          }
          else
            that.SystemFrom(1)
        }
      )
    },

子组件代码：

      UserInfo:{
          userAccount:"",
          password:""
      }, 
    //以上是data内部
    // 接收父组件APP传递的函数startLogin
      props:['startLogin'],
    //以下是methods内部
      login(){
        // 调用父组件传递的函数并传递UserLogin对象
        this.startLogin(this.UserInfo)
      },

当然父子组件间的通信还可以通过 消息的订阅与发布 ，全局事件总线的方式进行设置，但是我没还没用到，等用到了再写出来。

读到这里，这篇“Vue怎么使用axios发送请求”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。