Vue.prototype

maxj4719

于 2023-04-04 22:21:00 发布

阅读量312

点赞数

分类专栏： VUE 自学文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/maxj4719/article/details/129963344

版权

VUE 自学专栏收录该内容

2 篇文章

订阅专栏

文章展示了如何在Vue.js应用中定义全局变量，如`Vue.prototype.$appName`，以便在所有实例中使用。同时，它演示了如何全局注册axios库，以便通过`this.$axios`进行HTTP请求，以及如何使用qs库处理POST请求的数据。在组件的`created`生命周期钩子中，发起了一个携带用户ID和令牌的POST请求，并处理了响应数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在原型上定义它们使其在每个 Vue 的实例中可用。

简单说就是定义一个全局变量，在整个实例中都能用。

Vue.prototype.$appName = 'main'

用this.$appName 引用。

果要实现全局变量的功能，需要把属性变为引用类型

Vue.prototype.$appName = { name: 'main' }

后面使用 this.$appName.name 改变和引用相应的值

// mian.js
import Vue from 'vue'
import axios from 'axios'
import qs from 'qs'

Vue.prototype.$axios = axios    //全局注册，使用方法为:this.$axios
Vue.prototype.qs = qs           //全局注册，使用方法为:this.qs
————————————————

// 相应组件
<script>
  export default{
    data(){
      return{
        userId:666,　　　　　　　　　
        token:'',
      }
    },
    created(){
      this.$axios({
        method:'post',
        url:'api',
        data:this.qs.stringify({    //这里是发送给后台的数据
          userId:this.userId,
          token:this.token,
        })
      }).then((response) =>{          //这里使用了ES6的语法
        console.log(response)       //请求成功返回的数据
      }).catch((error) =>{
        console.log(error)       //请求失败返回的数据
      })
    }
  }
</script>