기사 디렉토리
I. 소개
프로젝트 개발 과정에서 정의된 메서드, 변수, 컴포넌트가 여러 곳에서 참조되는 경우 코드 재사용을 개선하고 유지 관리를 용이하게 하기 위해 공용 부분으로 추출하는 것을 고려할 필요가 있습니다.
2. 전역 변수 마운트
전역 변수의 전역 마운팅을 구현하는 방법에는 두 가지가 있습니다.
2.1 방법 1: Vue.prototype
1. 인스턴스 속성 추가
많은 구성 요소에서 데이터/유틸리티를 사용할 수 있지만 전역 범위를 오염시키고 싶지는 않습니다. 이 경우 프로토타입에서 정의하여 모든 Vue인스턴스 .
Vue.prototype.$appName = 'My App'
인스턴스가 생성되기 전에도 모든 인스턴스에서 사용할 수 있습니다 $appName. Vue실행하면:
new Vue({
beforeCreate: function () {
console.log(this.$appName)
}
})
그러면 콘솔이 My App을 인쇄합니다. 그렇게 간단합니다!
2.2 객체 소개
1. 변수를 저장할 새 global_variable.js파일을 . 예는 다음과 같습니다.
const startDate = new Date(new Date() - 24 * 60 * 60 * 1000 * 30)
const endDate = new Date()
const dataText = ''//表格置空
export default {
startDate,
endDate,
dataText,
}
글로벌 사용의 경우 예는 다음과 같습니다.
import globalVariable from './assets/js/global_variable'
Vue.prototype.GLOBAL = globalVariable
사용해야 하는 모듈 파일에서 사용합니다(가져올 필요 없이 직접 사용 this). 예는 다음과 같습니다.
data() {
return {
startDate: this.GLOBAL.startDate, //开始时间
endDate: this.GLOBAL.endDate, //结束时间
dataText: this.GLOBAL.dataText, //表格开始置空
};
},
참고 ⚠️: 로 시작해야 합니다 $. 그렇지 않으면 이름 충돌이 발생합니다!
3. 글로벌 함수를 전역적으로 마운트
재사용되는 기능이 많기 때문에 이러한 기능을 전역적으로 마운트하여 시간과 노력을 절약할 수 있습니다!
구현 프로세스는 다음과 같습니다.
- 새로운 전역 변수 모듈 파일을 별도로 생성하고, 모듈 내 일부 변수의 초기 상태를 정의하고,
export default;- 인스턴스에 도입 되어
main.js마운트Vue.prototype되었습니다 .vue다른 모듈 파일에서 사용하기 위해;- 또는 필요한 모듈 파일로 직접 가져옵니다.
전역 함수의 전역 마운팅을 구현하는 방법에는 두 가지가 있습니다.
3.1 방법 1: Vue.prototype
가입 main.js_
// Vue 全局挂载自定义函数
// folding为传进来的参数
// internalFolding 为函数名
Vue.prototype.internalFolding = function (folding){
//函数内容
}
모든 구성 요소에서 호출 가능한 함수
this.internalFolding(folding)
여기의 참조 방법은 권장되지 않습니다. 모든 참조를 넣는 main.js것은 지저분하기 때문입니다!
3.2 방법 2: exports.install + Vue.prototype
필요한 공용 JS 파일 작성( 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.js수입 및 사용
import folding from '@/static/js/folding'
Vue.use(folding);
모든 구성 요소의 호출 가능한 함수
this.internalFolding(this.folding);
여기의 참조 방법이 권장됩니다!
참고: 사용하기 편리한 플러그인 exports.install의 vue구문 설탕 vue.use.
4. 글로벌 컴포넌트 마운팅
에서 main.js전 세계적으로 등록하십시오 vue.
import MyBread from '@/components/common/MyBread.vue'
Vue.component("MyBread", MyBread);//全局自定义组件
필요한 구성 요소에서 직접 사용할 수 있으며 부모에서 자식으로 값을 전달할 필요성에 주의하십시오.
<MyBread level1="用户管理" level2="用户列表"></MyBread>