Article directory
I. Introduction
During the project development process, if the defined methods, variables, and components are referenced in multiple places, it is necessary to consider extracting them as public parts to improve code reuse and facilitate maintenance.
2. Mount global variables
There are two ways to implement global mounting of global variables.
2.1 Method 1: Vue.prototype
1. Add instance property
You may use data/utility in many components, but don't want to pollute the global scope. In this case, you can make them available in every Vueinstance .
Vue.prototype.$appName = 'My App'
This $appNameis Vueavailable in all instances, even before the instance is created. If we run:
new Vue({
beforeCreate: function () {
console.log(this.$appName)
}
})
Then the console will print out My App. It's that simple!
2.2 Object introduction
1. Create a new global_variable.jsfile to store variables, examples are as follows:
const startDate = new Date(new Date() - 24 * 60 * 60 * 1000 * 30)
const endDate = new Date()
const dataText = ''//表格置空
export default {
startDate,
endDate,
dataText,
}
For global use, the example is as follows:
import globalVariable from './assets/js/global_variable'
Vue.prototype.GLOBAL = globalVariable
Use it in the module file that needs to be used (no need to import, directly use thisit), the example is as follows:
data() {
return {
startDate: this.GLOBAL.startDate, //开始时间
endDate: this.GLOBAL.endDate, //结束时间
dataText: this.GLOBAL.dataText, //表格开始置空
};
},
Note ⚠️: Be sure to $start with , otherwise there will be a naming conflict!
3. Mount global functions globally
There are many functions being reused, so we can mount these functions globally, saving time and effort!
The implementation process is as follows:
- Create a new global variable module file separately, define the initial state of some variables in the module, and
export defaultexpose them with ;- Introduced in
main.jsandVue.prototypemountedvueon the instance. for use by other module files;- Or directly import it into the required module file;
There are two ways to implement global mounting of global functions.
3.1 Method 1: Vue.prototype
joining main.js_
// Vue 全局挂载自定义函数
// folding为传进来的参数
// internalFolding 为函数名
Vue.prototype.internalFolding = function (folding){
//函数内容
}
Callable function in all components
this.internalFolding(folding)
main.jsThe reference method here is not recommended, because it will be messy to put all the references in!
3.2 Method 2: exports.install + Vue.prototype
Write the public JS files you need ( folding.js)
exports.install = function (Vue, options) {
Vue.prototype.internalFolding = function (folding){
if(folding){
$(".abnormal-center-right").css("left","1%");
}else{
$(".abnormal-center-right").css("left","21%");
}
};
};
main.jsimport and use
import folding from '@/static/js/folding'
Vue.use(folding);
Callable functions in all components
this.internalFolding(this.folding);
The reference method here is recommended!
Note: Syntax sugar exports.installfor the plug-in, convenient to use.vuevue.use
4. Global component mounting
main.jsRegister globally in vue.
import MyBread from '@/components/common/MyBread.vue'
Vue.component("MyBread", MyBread);//全局自定义组件
It can be used directly in the required components, pay attention to the need to pass values from parent to child
<MyBread level1="用户管理" level2="用户列表"></MyBread>