脚本宝典收集整理的这篇文章主要介绍了

vue定义全局变量和全局方法

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p>一、全局引入文件</p> <p>1、先定义共用组件 common.vue</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script type=&quot;text/javascript&quot;> // 定义一些公共的属性和方法 <a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a> httpUrl = 'http://39.105.17.99:8080/' function commonFun() { console.log(&quot;公共方法&quot;) } // 暴露出这些属性和方法 <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { httpUrl, commonFun } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>&gt;</span><span class="javascript"> <span class="hljs-comment">// 定义一些公共的属性和方法</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> httpUrl = <span class="hljs-string">'http://39.105.17.99:8080/'</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">commonFun</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"公共方法"</span>) } <span class="hljs-comment">// 暴露出这些属性和方法</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> { httpUrl, commonFun } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>2、在需要使用的地方导入</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script> // 导入共用组件 import global from './common.vue' export default { data () { return { username: '', password: '', // 赋值使用 globalHttpUrl: global.httpUrl } }," title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-comment">// 导入共用组件</span> <span class="hljs-keyword">import</span> global <span class="hljs-keyword">from</span> <span class="hljs-string">'./common.vue'</span> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { data () { <span class="hljs-keyword">return</span> { <span class="hljs-attr">username</span>: <span class="hljs-string">''</span>, <span class="hljs-attr">password</span>: <span class="hljs-string">''</span>, <span class="hljs-comment">// 赋值使用</span> globalHttpUrl: global.httpUrl } },</span></code></pre> <p>3、使用</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template> {{globalHttpUrl}} </template>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> {{globalHttpUrl}} <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></code></pre> <p>二、main.js中引入全局变量和方法</p> <p>1、定义共用组件同上<br />2、main.js中引入并复制给vue</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// 导入共用组件 import global from './common.vue' Vue.prototype.COMMON = global" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs cs"><code><span class="hljs-comment">// 导入共用组件</span> import <span class="hljs-keyword">global</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'./common.vue'</span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>.prototype.COMMON = <span class="hljs-keyword">global</span></code></pre> <p>3、使用</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="export default { data () { return { username: '', password: '', // 赋值使用, 可以使用this变量来访问 globalHttpUrl: this.COMMON.httpUrl } }," title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code>export <span class="hljs-keyword">default</span> { <span class="hljs-keyword">data</span> () { <span class="hljs-keyword">return</span> { username: <span class="hljs-string">''</span>, password: <span class="hljs-string">''</span>, <span class="hljs-comment">// 赋值使用, 可以使用<a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a>变量来访问</span> globalHttpUrl: <span class="hljs-keyword">this</span>.COMMON.httpUrl } },</code></pre> <p>三、定义common.js文件,直接在main.js中引入,直接使用<br />1、common.js 这里注意 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.http 组件中使用 <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$http</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import Vue from 'vue' import VueResource from 'vue-resource' Vue.use(VueResource) const httpUrl = 'http://39.105.17.99:8080/' function httpGet (url, params) { return new Promise((resolve, reject) => { Vue.http.get(this.httpUrl + url, params).then( (res) => { resolve(res.json()) }, (err) => { reject(err.json()) } ) }) }</p> <p>function httpPost (url, params) { return new Promise((resolve, reject) => { Vue.http.post(this.httpUrl + url, params).then( (res) => { resolve(res.json()) }, (err) => { reject(err.json()) } ) }) } export default { httpUrl, httpGet, httpPost } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs coffeescript"><code><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> <span class="hljs-keyword">import</span> VueResource <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-resource'</span> Vue.use(VueResource) const httpUrl = <span class="hljs-string">'http://39.105.17.99:8080/'</span> function httpGet (url, params) { <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <a href="http://www.js-code.com/tag/promise" title="浏览关于“Promise”的文章" target="_blank" class="tag_link">Promise</a>(<span class="hljs-function"><span class="hljs-params">(resolve, reject)</span> =&gt;</span> { Vue.http.get(<span class="hljs-keyword">this</span>.httpUrl + url, params).<span class="hljs-keyword">then</span>( <span class="hljs-function"><span class="hljs-params">(res)</span> =&gt;</span> { resolve(res.json()) }, <span class="hljs-function"><span class="hljs-params">(err)</span> =&gt;</span> { reject(err.json()) } ) }) } function httpPost (url, params) { <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <a href="http://www.js-code.com/tag/promis" title="浏览关于“Promis”的文章" target="_blank" class="tag_link">Promis</a>e(<span class="hljs-function"><span class="hljs-params">(resolve, reject)</span> =&gt;</span> { Vue.http.post(<span class="hljs-keyword">this</span>.httpUrl + url, params).<span class="hljs-keyword">then</span>( <span class="hljs-function"><span class="hljs-params">(res)</span> =&gt;</span> { resolve(res.json()) }, <span class="hljs-function"><span class="hljs-params">(err)</span> =&gt;</span> { reject(err.json()) } ) }) } <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { httpUrl, httpGet, httpPost } </code></pre> <p>2、main.js</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import global from './common/common' Vue.prototype.GLOBAL = global" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs coffeescript"><code><span class="hljs-keyword">import</span> <span class="hljs-built_in">global</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'./common/common'</span> Vue.prototype.GLOBAL = <span class="hljs-built_in">global</span></code></pre> <p>3、使用</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template> {{GLOBAL.httpUrl}}</p> <p>--------------------------------------------</p> <p> created () { this.GLOBAL.httpGet('/home/list', {'name': 'zxc', 'password': '123'}).then( (res) => { console.log(res) } ) }," title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs coffeescript"><code>&lt;template&gt; {{GLOBAL.httpUrl}} -------------------------------------------- created () { <span class="hljs-keyword">this</span>.GLOBAL.httpGet(<span class="hljs-string">'/home/list'</span>, {<span class="hljs-string">'name'</span>: <span class="hljs-string">'zxc'</span>, <span class="hljs-string">'password'</span>: <span class="hljs-string">'123'</span>}).<span class="hljs-keyword">then</span>( <span class="hljs-function"><span class="hljs-params">(res)</span> =&gt;</span> { <span class="hljs-built_in">console</span>.log(res) } ) },</code></pre> <p><strong>总结 实例</strong><br />common.vue文件,项目中的公共,或者全局文件</p> <p>vue-resource需要先配置一下 main.js</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// 配置使用formDate Vue.http.options.emulateHTTP = true Vue.http.options.emulateJSON = true" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs objectivec"><code><span class="hljs-comment">// 配置使用formDate</span> Vue.http.options.emulateHTTP = <span class="hljs-literal">true</span> Vue.http.options.emulateJSON = <span class="hljs-literal">true</span></code></pre> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script type=&quot;text/javascript&quot;> // 定义一些公共的属性和方法 const httpUrl = 'http://39.105.17.99:8080/' function promiseFun (url, params) { return new Promise((resolve, reject) => { this.$http.post(this.globalHttpUrl + url, params).then( (res) => { resolve(res.json()) }, (err) => { reject(err.json()) } ) }) } // 暴露出这些属性和方法 <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { httpUrl, promiseFun } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>&gt;</span><span class="javascript"> <span class="hljs-comment">// 定义一些公共的属性和方法</span> <span class="hljs-keyword">const</span> httpUrl = <span class="hljs-string">'http://39.105.17.99:8080/'</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">promiseFun</span> (<span class="hljs-params">url, params</span>) </span>{ <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =&gt;</span> { <span class="hljs-keyword">this</span>.$http.post(<span class="hljs-keyword">this</span>.globalHttpUrl + url, params).then( <span class="hljs-function">(<span class="hljs-params">res</span>) =&gt;</span> { resolve(res.json()) }, (err) =&gt; { reject(err.json()) } ) }) } <span class="hljs-comment">// 暴露出这些属性和方法</span> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { httpUrl, promiseFun } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p><strong>使用</strong></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="export default { data () { return { username: '', password: '', globalHttpUrl: global.httpUrl, promiseFun: global.promiseFun } }, methods: { loginInFun () { localStorage.setItem('userId', '00001') let params = { telphone: this.username, password: this.password } this.promiseFun('itArtison/user/login', params).then( (res) => {<br /> console.log(res)<br /> this.$Message.info(res.message)<br /> // 登录成功过以后,这里从初session<br /> // 先将对象转换为json字符串<br /> localStorage.setItem('userInfo', JSON.stringify(res.data))<br /> if (res.code === '0000') {<br /> this.$router.push({'name': 'Home'})<br /> }<br /> },<br /> (err) => {<br /> console.log(err)<br /> this.$Message.info(err.message)<br /> }<br /> )<br /> }<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs coffeescript"><code><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { data () { <span class="hljs-keyword">return</span> { username: <span class="hljs-string">''</span>, password: <span class="hljs-string">''</span>, globalHttpUrl: <span class="hljs-built_in">global</span>.httpUrl, promiseFun: <span class="hljs-built_in">global</span>.promiseFun } }, methods: { loginInFun () { localStorage.setItem(<span class="hljs-string">'userId'</span>, <span class="hljs-string">'00001'</span>) <a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a> params = { telphone: <span class="hljs-keyword">this</span>.username, password: <span class="hljs-keyword">this</span>.password } <span class="hljs-keyword">this</span>.promiseFun(<span class="hljs-string">'itArtison/user/login'</span>, params).<span class="hljs-keyword">then</span>( <span class="hljs-function"><span class="hljs-params">(res)</span> =&gt;</span> { <span class="hljs-built_in">console</span>.log(res) <span class="hljs-keyword">this</span>.$Message.info(res.message) <span class="hljs-regexp">//</span> 登录成功过以后,这里从初session <span class="hljs-regexp">//</span> 先将<a href="http://www.js-code.com/tag/%e5%af%b9%e8%b1%a1%e8%bd%ac%e6%8d%a2" title="浏览关于“对象转换”的文章" target="_blank" class="tag_link">对象转换</a>为json字符串 localStorage.setItem(<span class="hljs-string">'userInfo'</span>, JSON.stringify(res.data)) <span class="hljs-keyword">if</span> (res.code === <span class="hljs-string">'0000'</span>) { <span class="hljs-keyword">this</span>.$router.push({<span class="hljs-string">'name'</span>: <span class="hljs-string">'Home'</span>}) } }, <span class="hljs-function"><span class="hljs-params">(err)</span> =&gt;</span> { <span class="hljs-built_in">console</span>.log(err) <span class="hljs-keyword">this</span>.$Message.info(err.message) } ) } }</code></pre>

总结

以上是脚本宝典为你收集整理的

vue定义全局变量和全局方法

全部内容,希望文章能够帮你解决

vue定义全局变量和全局方法

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过