Implementation of global function operation defining global variables in vue project

Write at the front:

For example, in the project, Often, some functions and variables need to be reused, such as the website server address, which is obtained from the background: the user's login token, the user's address information, etc. At this time, it is necessary to set a wave of global variables and global functions. These two settings are not too difficult, and they have one thing in common. There may be one friend who doesn't know much about it, so write them casually and share one wave.

Define global variables

Principle:

Set up a special global variable module file, the module defines the initial state of some variables, exposes it with export default, and mounts it on vue instance with Vue. prototype in main. js, or when it needs to be used in other places, the module can be introduced.

Global variable module file:

Global. vue file:

<script>
const serverSrc='www.baidu.com';
const token='12345678';
const hasEnter=false;
const userSite=" Diaoyu Island, China ";
 export default
 {
 userSite,// User address 
 token,// Users token Identity 
 serverSrc,// Server address 
 hasEnter,// User login status 
 }
</script>

Usage 1:

Refer to the global variable module file where necessary, and then get the global variable parameter value through the variable name in the file.

Use in the text1.vue component:

<template>
 <div>{{ token }}</div>
</template>

<script>
import global_ from '../../components/Global'// Reference module comes in 
export default {
 name: 'text',
data () {
 return {
   token:global_.token,// Assign a global variable to the data Inside, you can also use it directly global_.token
  }
 }
}
</script>
<style lang="scss" scoped>

</style>

Usage 2:

In the main. js file of the program entry, mount the above Global. vue file to Vue. prototype.

import global_ from '. /components/Global'//Reference file Vue. prototype. GLOBAL = global_// Mount on Vue instance

Then, in the whole project, the global variables defined in Global file can be directly accessed through this without referring to Global. vue module file.

text2.vue:

<template>
 <div>{{ token }}</div>
</template>

<script>
export default {
 name: 'text',
data () {
 return {
   token:this.GLOBAL.token,// Direct through this Access global variables. 
  }
 }
}
</script>
<style lang="scss" scoped>
</style>

Vuex can also set global variables:

The global variables are stored through vuex. There are many things here, and they are relatively complicated. Interested friends can consult the data by themselves and toss a wave.

Define global functions

Principle

Create a new module file, and then mount the function to the Vue instance through Vue. prototype in main. js, and run the function through this. Function name.

1. Write functions directly in main. js

Simple functions can be written directly in main. js

Vue.prototype.changeData = function (){//changeData Is the function name 
 alert(' Successful execution ');
}

Component is called:

this. changeData (); //Run the function directly through this

2. Write a module file and mount it on top of main. js.

base. js file. The file location can be placed at the same level as main. js for easy reference

exports.install = function (Vue, options) {
 Vue.prototype.text1 = function (){// Global function 1
 alert(' Successful execution 1');
 };
 Vue.prototype.text2 = function (){// Global function 2
 alert(' Successful execution 2');
 };
};

main. js entry file:

import base from './base'//Reference Vue. use (base); //Register global functions as plug-ins

Component is called:

this.text1();

this.text2();

Afterword

The above is how to define the global function of global variables. The global function of global variables here can not be limited to the vue project. vue-cli uses webpack for modularization, and other modular development, defining global variables and functions are basically the same. The above is only for global variables, global functions hope that after reading this article, we can give you 1 point of help.

Additional knowledge: How to call the methods of methods externally in vue

1. First define a common vue component;

var eventHub = new Vue();

2. In the current component of the event, in created, it is passed to the public component eventHub with $on, translate is custom, and getCardNum (data) is the method to be called externally;

eventHub.$on('translate', function (data) {
    that.getCardNum(data);
   });

3. Finally, in the parent component, notice that the negative component should be saved with 1 variable.

var vm = new Vue ({});

4. Define a method in the method of methods in the parent component, and receive the method in the public component with $emit in the method;

 var vm = new Vue({
  el: '#example',
  data: {
   msg: 'Hello Directive',
   data: {}
  },
  methods: {
   getCardNum: function (data, on) {
    eventHub.$emit('translate', data);
   }
  }
 });

5. Finally, the function getCardNum (data) can be called outside the vue component or outside the file, for example, onclick = vm. getCardNum () can be called in html; vm is the parent component

6. Note 1. Be sure to write the variable name of the parent component

vm. getCardNum ();

In the process of developing with vue, I encountered a pop-up page in the background of java and wanted to call the method in my vue component, but the pop-up page in the background was not in my vue component, and other pages wanted to call the method in vue.

It can only be called in the parent component, so it has been studied for a long time, and finally it is determined that the function () method in the component is passed to the parent component at the top level, the negative component is saved in the variable, and finally the method is called directly in other pages. When calling, it cannot be called with the @ click method.

Because the back-end page is not inside my vue component, the call is onclick = vm. getCardNum (); Called this way, vm is the parent component;