vue定义全局变量和全局方法的方法示例


            一、全局引入文件

1、先定义共用组件 common.vue





<script type="text/javascript">

  // 定义一些公共的属性和方法

  const httpUrl = 'http://39.105.17.99:8080/'

  function commonFun() {

    console.log("公共方法")

  }

  // 暴露出这些属性和方法

  export default {

    httpUrl,

    commonFun

  }

</script>





2、在需要使用的地方导入





<script>

// 导入共用组件

import global from './common.vue'

export default {

 data () {

  return {

   username: '',

   password: '',

   // 赋值使用

   globalHttpUrl: global.httpUrl

  }

 },





3、使用





<template>

  {{globalHttpUrl}}

</template>



二、main.js中引入全局变量和方法

1、定义共用组件同上



2、main.js中引入并复制给vue





// 导入共用组件

import global from './common.vue'

Vue.prototype.COMMON = global





3、使用





export default {

 data () {

  return {

   username: '',

   password: '',

   // 赋值使用, 可以使用this变量来访问

   globalHttpUrl: this.COMMON.httpUrl

  }

 },





以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中文源码网。