Vue的axios如何全局注册
最近用 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如何全局注册的更多相关文章
- vue组件局部与全局注册的区别
//局部注册 var mycomponent = new extend({ <!--Vue.extend()是Vue构造器的扩展,调用Vue.extend()我们将创建一个组件构造 ...
- vue项目组件的全局注册
在vue-cli项目中,我们经常会封装自己的组件,并且要在多个界面中引用它,这个时候就需要全局注册组件. 首先我们会封装自己的组件,比如twoDimensionTable文件夹下的index.vue: ...
- 第七十一篇:Vue组件的私有和全局注册
好家伙, 1.组件的父子关系 我们封装三个组件,分别为left组件,right组件和App组件 在封装时: 在封装时,彼此的关系是独立的,并不存在父子关系 在使用时: 在使用时,根据彼此的嵌套关系,形 ...
- [Vue]使用axios实现ajax请求
1.定义myAjax export const myAjax=function createHttpClient(ajaxConfig) { let httpClient = null; if ...
- Vue 局部组件和全局组件的使用
<template> <div id="app"> <!--<img alt="Vue logo" src="./ ...
- NO--09今天遇到的一点小问题之axios全局注册
今天用 Vue 写项目的时候,用到 axios ,因为 axios 不能用 Vue.use() ,所以在每个 .vue 文件中使用 axios 时就需要 import , .vue 文件少的话还好说, ...
- Vue 全局注册逐渐 和 局部注册组件
//定义一个名为 button-counter 的新组件 Script: Vue.component('button-counter',{//button-counter 这个是组件的名字 data: ...
- vue 组件 全局注册和局部注册
全局注册,注册的组件需要在初始化根实例之前注册了组件: 局部注册,通过使用组件实例选项注册,可以使组件仅在另一个组件或者实例的作用域中可用: 全局组件 js Vue.component('tab-ti ...
- vue全局注册与局部注册的写法
vue全局注册是每个实例化的vue都可以使用,而局部则是实例化注册的那个可以用.举个例子,看看写法: <div id="app"> <p>页面载入时,inp ...
随机推荐
- c# 调试过程
- Shell脚本字符串匹配及日常命令工具 - 用法总结(技巧指南)
Shell提供了很多字符串和文件处理的命令,如awk.expr.grep.sed等命令,还有文件的排序.合并和分割等一系列的操作命令.下面重点总结下Shell字符串处理.文本处理以及各类命令及函数用法 ...
- 记一次oracle 11g数据导入
1.ORACLE数据库数据导入到测试库环境 172.15.1.51 root kic@test 172.15.1.52 root 一般先将数据导入52的环境(配置比较低),再将数据导入51的环境(本 ...
- Spring Boot 2发送邮件手把手图文教程
原文:http://www.itmuch.com/spring-boot/send-email/ 本文基于:Spring Boot 2.1.3,理论支持Spring Boot 2.x所有版本. 最近有 ...
- 【转】用 Consul 来做服务注册与服务发现
原文:https://segmentfault.com/a/1190000018731395?utm_source=tag-newest ------------------------------- ...
- OpenSSL和Python实现RSA Key公钥加密私钥解密
基于非对称算法的RSA Key主要有两个用途,数字签名和验证(私钥签名,公钥验证),以及非对称加解密(公钥加密,私钥解密).本文提供一个基于OpenSSL和Python进行非对称加解密的例子. 1. ...
- vue+webpack4 脚手架搭建
1, vue 中 h => h(App) 的含义: //render: h => h(App) 是下面内容的缩写: render: function (createElement) { r ...
- numpy模块的基本使用
numpy(Numerical Python)提供了python对多维数组对象的支持:ndarray,具有矢量运算能力,快速.节省空间.numpy支持高级大量的维度数组与矩阵运算,此外也针对数组运算提 ...
- kombu在redis中的键值名
参考flower源码 取队列名,发送到求数量的函数中 queue_names = ControlHandler.get_active_queue_names() queues = yield brok ...
- DOM属性获取、设置、删除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...