最近用 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++——虚函数表解析

     转自:https://blog.csdn.net/haoel/article/details/1948051 前言 C++中的虚函数的作用主要是实现了多态的机制.关于多态,简而言之就是用父类型指针指 ...

  2. 0016SpringBoot实现RESTFUL形式的增删改查

    1.列表页面如下 <!DOCTYPE html><!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples ...

  3. React Snippets 常用记录

    官网 PropTypes ptar→ PropTypes.array.isRequired ptor→ PropTypes.object.isRequired ptsr→ PropTypes.stri ...

  4. flask 杂记3

    SQLAlchemy在模型之间建立关系模式:  https://www.bbsmax.com/A/mo5k7gKn5w/ 一对多时:外键只能存储单一数据(标量),所以外键总是在“多”这一侧定义,多篇文 ...

  5. C语言Ⅰ博客作业06

    这个作业属于哪个课程 C语言程序设计Ⅰ 这个作业要求在哪里 熟练掌握多分支结构,字符型数据类型和逻辑运算符 我在这个课程的目标是 https://www.cnblogs.com/tongyingjun ...

  6. fiddler修改请求和返回

    一.修改请求 1.先设置请求前断点 2.设置拦截,在左下角的QuickExec命令行中输入bpu www.baidu.com/XXXX 3.选中需要修改的请求,选中Inspectors面板,使用Raw ...

  7. CodeForces 840C - On the Bench | Codeforces Round #429 (Div. 1)

    思路来自FXXL中的某个链接 /* CodeForces 840C - On the Bench [ DP ] | Codeforces Round #429 (Div. 1) 题意: 给出一个数组, ...

  8. HTML 005 标题

    <h1>这是一个标题.</h1> <h2>这是一个标题.</h2> <h3>这是一个标题.</h3> HTML 标题 在 HTM ...

  9. php面向对象之数据隐藏

    什么是数据隐藏? 看到这个有的人会觉得挺不理解的.在前面的文章中,介绍类的时候,我们说定义变量用的关键词是public,但是不止这一个,还有public.private.protected.stati ...

  10. 使用AJAX传输不了值时

    当时候AJAX往后台传递值时  传不到后台  这时我们就要检查程序是否有问题了 一般AJAX程序 $.ajax( { type: "POST", url: "Login. ...