Written before:
As the question, in the project, some functions and variables often need to be reused, such as the website server address, obtained from the background: the user's login token, the user's address information, etc. At this time, you need to set a wave of global variables and global functions. These two settings are not too difficult, and there are some common points. Some friends may not know much about this, so they can write it out and share it.
Define global variables
principle:
Set up a dedicated global variable module file, define some variable initial states in the module, expose them with export default, and use it to mount it on the vue instance or when it needs to be used in other places, you can introduce the module.
Global variable module file:
document:
<script>
const serverSrc='';
const token='12345678';
const hasEnter=false;
const userSite="China Diaoyu Islands";
export default
{
userSite,//User Address token,//User token identity serverSrc,//Server address hasEnter,//User login status }
</script>
How to use 1:
Reference it into the global variable module file where needed, and then obtain the global variable parameter value through the variable name in the file.
Use in components:
<template>
<div>{{ token }}</div>
</template>
<script>
import global_ from '../../components/Global'//Reference module comes inexport default {
name: 'text',
data () {
return {
token:global_.token,// Assign global variables to data, you can also use global_.token directly }
}
}
</script>
<style lang="scss" scoped>
</style>
How to use 2:
In the file in the program entrance, mount the above file to.
import global_ from './components/Global'//Reference file = global_//Hook to Vue instance
Then, there is no need to refer to the module file in the entire project, and you can directly access the global variables defined in the Global file through this.
：
<template>
<div>{{ token }}</div>
</template>
<script>
export default {
name: 'text',
data () {
return {
token:,// Access global variables directly through this. }
}
}
</script>
<style lang="scss" scoped>
</style>
Vuex can also set global variables:
VUex stores global variables. There are more things here and they are relatively complicated. Interested friends can check the information by themselves and make a lot of trouble.
Define global functions
principle
Create a new module file, and then run the function by mounting the function onto the Vue instance and using this. function name.
1. Write functions directly in it
Simple functions can be written directly in it
= function (){//changeData is the function name alert('Execution was successful');
}
Called in the component:
();//Run the function directly through this
2. Write a module file and mount it on it.
Files, file locations can be placed at the same level for easy reference
= function (Vue, options) {
.text1 = function (){//Global function 1 alert('Execution 1');
};
.text2 = function (){//Global Function 2 alert('Execution 2');
};
};
Entry file:
import base from './base'//Reference (base);//Register global functions as plug-ins
Called in the component:
this.text1();
this.text2();
Later stories
The above is how to define global variables. The content of global functions. The global variables here are not limited to vue projects. vue-cli uses webpack for modularization, and other modular developments. The routines of defining global variables and functions are basically the same. The above article is just about global variables. I hope that after reading this article, I can help you a little.
Supplementary knowledge:How to call methods externally in vue
1. First define a public vue component;
var eventHub = new Vue();
2. In the current component of the event, in created, use $on to pass to the public component eventHub, translate is customized, and getCardNum(data) is the method to be called externally;
eventHub.$on('translate', function (data) {
(data);
});
3. Finally, in the parent component, note that the negative component should be saved with a variable.
var vm = new Vue({})；
4. Define a method in the methods method in the parent component, and use $emit to receive the methods in the public component;
var vm = new Vue({
el: '#example',
data: {
msg: 'Hello Directive',
data: {}
},
methods: {
getCardNum: function (data, on) {
eventHub.$emit('translate', data);
}
}
});
5. Finally, you can call the getCardNum (data) function outside the vue component or outside the file. For example, in html, you can call it onclick = () in this way; vm is the parent component
6. Be sure to write the variable name of the parent component
()；
During the process of using vue development, I encountered a pop-up page in the java background that wanted to call the methods in my vue component, but the pop-up page in the background is not in my vue component, and other pages want to call the methods in the vue component.
It can only be called in the parent component, so I studied it for a long time and finally decided to pass the function() method in the component to the parent component at the top layer, save the negative component in the variable, and finally call the method directly on other pages. When calling, you cannot use the @click method to call it.
Because the background page is not inside my vue component, the call is onclick = (); in this way, vm is the parent component;
The above article is implemented in the vue project to define global variables. Global function operations are all the content I share with you. I hope you can give you a reference and I hope you can support me more.