반응형
Notice
Recent Posts
Recent Comments
Link
투케이2K
30. (VueJs) [Vue 3] - main.js 파일 app.config.globalProperties 사용해 글로벌 변수 선언 및 사용 실시 본문
VueJs
30. (VueJs) [Vue 3] - main.js 파일 app.config.globalProperties 사용해 글로벌 변수 선언 및 사용 실시
투케이2K 2022. 6. 1. 16:00반응형
[개발 환경 설정]
개발 툴 : VS CODE
개발 언어 : Vue Js
![](https://blog.kakaocdn.net/dn/cJ7B1r/btrDGI1TXJn/1QciE277ALs0qYjPezB0E0/img.png)
[main.js - 소스 코드]
// [main.js 설명]
// 1. 애플리케이션 진입점으로 Vue 초기화, 폴더 , 전역, 컴포넌트 , 라이브러리 등록 수행 실시
// 2. import App 을 사용해 최상위 App.vue 컴포넌트 지정 실시
// 3. createApp mount 를 사용해 index.html 파일 div id 값 설정 및 렌더링 시작점 지정 실시
// 4. router : 라우터는 웹페이지 간의 이동하는 방법 및 경로를 설정해주는 파일입니다
// 5. app.config.globalProperties : 글로벌 변수를 선언합니다. 변수 명칭은 $변수명칭 을 지정합니다
// [애플리케이션 생성 실시]
import { createApp } from 'vue'
import App from './App.vue'
import routers from './routers/index.js'
// [앱 생성 실시]
const app = createApp(App);
// [앱 글로벌 변수 선언 실시]
app.config.globalProperties.$name = "투케이"; // [name / 이름]
app.config.globalProperties.$age = 29; // [age / 나이]
// [라우터 사용 설정]
app.use(routers);
// [main 아이디 : 렌더링 시작점]
app.mount('#main');
[vue 컴포넌트 - 소스 코드]
<script>
export default {
name: 'MainComponent',
// [부모에서 전달 받은 데이터 : 자식에서 동적 수정 불가능]
// [형태 : <MainComponent msg="MainComponent"/>]
props: {
msg: String
},
// [컴포넌트 생성 시 초기 데이터 설정 (리턴 값 지정)]
data () {
console.log("");
console.log("[MainComponent] : [data] : [start]");
console.log("설 명 : 데이터 초기화 준비");
console.log("글로벌 변수 [이름] : " + this.$name);
console.log("글로벌 변수 [나이] : " + this.$age);
console.log("");
return {
data: "MAIN" // [데이터 정의]
}
},
// [메소드 정의 실시]
methods: {
}
}
</script>
[결과 출력]
![](https://blog.kakaocdn.net/dn/Y24w4/btrDHdUSX7B/rCuDHIdqamkRKv90KvOmRk/img.png)
반응형
'VueJs' 카테고리의 다른 글
Comments