vue defines a global instance
Definition and use
definition:
.$appName = 'My App'
use:
this.$appName (Anywhere)
Use scenarios:
You might be inData/utilities are used in many components,butDon't want to pollute the global scope。
In this case, you can make them available in each instance of Vue by defining them on the prototype
.$appName = 'My App'
so$appName
It's available in all Vue instances, even before the instance is created.
If we run:
new Vue({ beforeCreate: function () { (this.$appName) } })
The console will print out the My App. It's that simple!
Why does appName start with $? Is this important? What will happen to it?
$ is a simple convention for properties that are available in all instances of Vue.
Doing so will avoid conflicts with defined data, methods, and computational properties.
Three implementations of vue defining global methods
Method 1: Use
//Write function in = function (){ ... } //Can function call in all components();
Method 2: Use +
// Write the documents you need = function (Vue, options) { = function (){ ... }; }; // Introduce and useimport fun from './fun' (fun); //Can function call in all components();
When using the method, run error exports is not defined
Solution:
export default { install(Vue) { = { ... } } }
Method 3: Use global variable module file
document:
<script> const token='12345678'; export default { methods: { getToken(){ .... } } } </script>
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.
<script> import global from '../../components/Global'//Reference module comes inexport default { data () { return { token: } }, created: function() { (); } } </script>
Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.