Vue怎么使用axios發(fā)送請求

本文小編為大家詳細(xì)介紹“Vue怎么使用axios發(fā)送請求”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Vue怎么使用axios發(fā)送請求”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

例：當(dāng)我們在APP組件的子組件UserLogin組件中寫到登錄函數(shù)：

    login(){
      console.log('登錄')
      let params = {
        userAccount: UserInfo.userAccount,
        password: UserInfo.password
      }
      // 防止閉包找不到data元素的調(diào)用
      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)
        }
      },

這時的登錄函數(shù)是沒辦法在子組件內(nèi)部進(jìn)行運行的。也就是我跑起來之后是沒辦法通過登錄按鈕進(jìn)行訪問服務(wù)器接收數(shù)據(jù)的。

這里我將這行代碼放進(jìn)我們的APP組件中就成功的實現(xiàn)了數(shù)據(jù)的訪問與接收。但是這涉及到子組件與父組件的數(shù)據(jù)通信的方式：上次說道this.$emit('父組件在子組件上綁定的方法名')可以實現(xiàn)子組件調(diào)用父組件的方法，而在父組件調(diào)用子組件時如果有<login name=' params '>就可以在子組件內(nèi)的props:[' name']對該參數(shù)進(jìn)行接收，之后的處理都是以name進(jìn)行操作的，那么我們其實也可以將其變成一個函數(shù)就可以直接在子組件內(nèi)部調(diào)用父組件的函數(shù)了。

父組件相關(guān)代碼：

    <div v-if="loginWord === true">
      <login @close="closeL" :startLogin="startLogin"></login>
    </div>
    //以下是methods內(nèi)部
    // 登錄請求發(fā)起
    startLogin(UserInfo){
      console.log('登錄')
      let params = {
        userAccount: UserInfo.userAccount,
        password: UserInfo.password
      }
      // 防止閉包找不到data元素的調(diào)用
      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內(nèi)部
    // 接收父組件APP傳遞的函數(shù)startLogin
      props:['startLogin'],
    //以下是methods內(nèi)部
      login(){
        // 調(diào)用父組件傳遞的函數(shù)并傳遞UserLogin對象
        this.startLogin(this.UserInfo)
      },

當(dāng)然父子組件間的通信還可以通過 消息的訂閱與發(fā)布 ，全局事件總線的方式進(jìn)行設(shè)置，但是我沒還沒用到，等用到了再寫出來。

讀到這里，這篇“Vue怎么使用axios發(fā)送請求”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。