最近用 Vue 写项目的时候,用到 axios ,因为 axios 不能用 Vue.use() ,所以在每个 .vue 文件中使用 axios 时就需要 import.vue 文件少的话还好说,多的话未免有点麻烦。

后来想了想,能不能直接把 axios 加到 Vue 的原型中,这样就达到了全局注册了。

1. 首先在 main.js 中引入 axios
import Vue from 'vue'
import axios from 'axios'
//把 `axios` 加到 `Vue` 的原型中
Vue.prototype.axios = axios;
new Vue({
el: '#app',
render:h => h(App)
})

2. 在 .vue 文件中使用时,注意 axios 前要加 this

<script>
export default {
name:'app',
data(){
return{
msg:'hello'
}
},
methods:{
send(){
// 注意:因为 axios 是加到 Vue 的原型中了,所以使用 axios 方法时,前面需要加 this
this.axios.get('https://www.baidu.com*******')
.then(resp => {
console.log(resp.data)
}).catch(err => {
console.log(err);
})
}
}
}
</script>

转: https://www.jianshu.com/p/12ede8685eea

Vue的axios如何全局注册的更多相关文章

  1. vue组件局部与全局注册的区别

    //局部注册 var mycomponent = new extend({        <!--Vue.extend()是Vue构造器的扩展,调用Vue.extend()我们将创建一个组件构造 ...

  2. vue项目组件的全局注册

    在vue-cli项目中,我们经常会封装自己的组件,并且要在多个界面中引用它,这个时候就需要全局注册组件. 首先我们会封装自己的组件,比如twoDimensionTable文件夹下的index.vue: ...

  3. 第七十一篇:Vue组件的私有和全局注册

    好家伙, 1.组件的父子关系 我们封装三个组件,分别为left组件,right组件和App组件 在封装时: 在封装时,彼此的关系是独立的,并不存在父子关系 在使用时: 在使用时,根据彼此的嵌套关系,形 ...

  4. [Vue]使用axios实现ajax请求

    1.定义myAjax export const myAjax=function createHttpClient(ajaxConfig) {   let httpClient = null;   if ...

  5. Vue 局部组件和全局组件的使用

    <template> <div id="app"> <!--<img alt="Vue logo" src="./ ...

  6. NO--09今天遇到的一点小问题之axios全局注册

    今天用 Vue 写项目的时候,用到 axios ,因为 axios 不能用 Vue.use() ,所以在每个 .vue 文件中使用 axios 时就需要 import , .vue 文件少的话还好说, ...

  7. Vue 全局注册逐渐 和 局部注册组件

    //定义一个名为 button-counter 的新组件 Script: Vue.component('button-counter',{//button-counter 这个是组件的名字 data: ...

  8. vue 组件 全局注册和局部注册

    全局注册,注册的组件需要在初始化根实例之前注册了组件: 局部注册,通过使用组件实例选项注册,可以使组件仅在另一个组件或者实例的作用域中可用: 全局组件 js Vue.component('tab-ti ...

  9. vue全局注册与局部注册的写法

    vue全局注册是每个实例化的vue都可以使用,而局部则是实例化注册的那个可以用.举个例子,看看写法: <div id="app"> <p>页面载入时,inp ...

随机推荐

  1. c# 调试过程

  2. Shell脚本字符串匹配及日常命令工具 - 用法总结(技巧指南)

    Shell提供了很多字符串和文件处理的命令,如awk.expr.grep.sed等命令,还有文件的排序.合并和分割等一系列的操作命令.下面重点总结下Shell字符串处理.文本处理以及各类命令及函数用法 ...

  3. 记一次oracle 11g数据导入

    1.ORACLE数据库数据导入到测试库环境 172.15.1.51 root  kic@test 172.15.1.52 root 一般先将数据导入52的环境(配置比较低),再将数据导入51的环境(本 ...

  4. Spring Boot 2发送邮件手把手图文教程

    原文:http://www.itmuch.com/spring-boot/send-email/ 本文基于:Spring Boot 2.1.3,理论支持Spring Boot 2.x所有版本. 最近有 ...

  5. 【转】用 Consul 来做服务注册与服务发现

    原文:https://segmentfault.com/a/1190000018731395?utm_source=tag-newest ------------------------------- ...

  6. OpenSSL和Python实现RSA Key公钥加密私钥解密

    基于非对称算法的RSA Key主要有两个用途,数字签名和验证(私钥签名,公钥验证),以及非对称加解密(公钥加密,私钥解密).本文提供一个基于OpenSSL和Python进行非对称加解密的例子. 1. ...

  7. vue+webpack4 脚手架搭建

    1, vue 中 h => h(App) 的含义: //render: h => h(App) 是下面内容的缩写: render: function (createElement) { r ...

  8. numpy模块的基本使用

    numpy(Numerical Python)提供了python对多维数组对象的支持:ndarray,具有矢量运算能力,快速.节省空间.numpy支持高级大量的维度数组与矩阵运算,此外也针对数组运算提 ...

  9. kombu在redis中的键值名

    参考flower源码 取队列名,发送到求数量的函数中 queue_names = ControlHandler.get_active_queue_names() queues = yield brok ...

  10. DOM属性获取、设置、删除

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...