Vue使用axios发送请求简单实现代码

上一篇文章我们在vue工程项目中引入了axios库并将通用的API进行了封装，但是遇到了一个问题就是我们在组件内部写的函数发送请求是不会被vue实例进行执行的，也就是说VC中的函数无法直接的由VM去接管执行，这时我们需要将这个请求的执行函数位置调到APP这个父组件上去，因为只有APP组件被所谓的VM给接管了的，其他的组件都是APP组件的子组件。

例：当我们在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)
      },

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

原文地址：https://blog.csdn.net/m0_59588838/article/details/127855271