Vue.js - import, export (유튜브 코딩애플 6강)

1. 다른 파일의 변수 또는 함수 가져오기

• js 파일를 새로 만든 뒤 변수 또는 함수 작성 후 export default 변수_또는_함수명

js 파일 (import_ex.js)

• App.vue에 import 임의의_변수_또는_함수명 from './js파일_경로'

App.vue 파일 (화면에 데이터가 표시됨)

 

2. 다른 파일의 변수 또는 함수 2개 이상 가져오기

• js 파일를 새로 만든 뒤 변수 또는 함수 2개 이상 작성 후 export { 변수_또는_함수명 }

js 파일 (import_ex.js)

• App.vue에 import { 사용할_변수_또는_함수명 } from './js파일_경로'

App.vue 파일

 

3. Vue 파일 가져오기

• 모듈의 이름: HelloWorld
• props: 부모에게 받을 데이터 (데이터_이름: 데이터_타입)

./components/HelloWorld.vue 파일의 script 부분

• import 임의의_모듈_이름 from './모듈_파일_위치'
• components: 사용할 모듈 이름 입력 (입력 안하면 오류 발생)
• <template>
  • HelloWorld: 모듈 이름
  • msg: 모듈에 넘겨줄 데이터 이름
  • Welcome to Your Vue.js App: 모듈에 넘겨줄 데이터 값

App.vue 파일