[Vue] 파일분리 import / export

oneroom.js 파일에 있는 데이터를 App.vue내 data()로 가져오기
oneroom.js 파일에서 App.vue로 변수를 보내고 싶을때 import / export 문법을 사용한다.

export default

내보내기 할 파일에서 내보내기 할 변수를 export 한다.

var apple = 10;
export default apple

import

가져오기 할 파일에서 <script>안에 import한다.
(.js는 생략 가능)

import apple from './assets/oneroom.js';
// import 변수 from '경로';

export

여러가지 변수를 한번에 내보낼 때
(변수 뿐만 아니라 함수도 export할 수 있다.)

var apple = 10;
var apple2 = 100;
export {apple, apple2}

export default 가 아니라 export만 했을때에는 import 시 문법이 살짝 달라짐

import {apple, apple2} from './assets/oneroom.js';

---

App.vue

<template>  
  <div class="black-bg" v-if="모달창열렸니==1">
    <div class="white-bg">
      <h4>상세페이지</h4>
      <p>상세페이지 내용</p>
      <button @click="모달창열렸니=0">닫기</button>
    </div>
  </div>

  <div class="menu">
    <a v-for="(a,i) in 메뉴들" :key="i">{{a}}</a>
  </div>

  <div v-for="(a,i) in 원룸들" :key="i">
    <img :src="a.image" class="room-img">
    <h4 @click="모달창열렸니=1">{{ a.title }}</h4>
    <p>{{ a.content }}</p>
    <p>{{ a.price }}원</p>
  </div>
</template>

<script>
import data from './assets/oneroom';

export default {
  name: 'App',
  data(){
    return {
      메뉴들: ['Home', 'Shop', 'About'],
      모달창열렸니: 0,  // 0:닫힘, 1:열림
      원룸들: data,
    }
  },
  methods: {
  },
  components: {}
}
</script>

oneroom.js

var a = [
  {
    id : 0,
    title: "Sinrim station 30 meters away",
    image: "https://codingapple1.github.io/vue/room0.jpg",
    content: "18년 신축공사한 남향 원룸 ☀️, 공기청정기 제공",
    price: 340000
  },
  {
    id : 1,
    title: "Changdong Aurora Bedroom(Queen-size)",
    image: "https://codingapple1.github.io/vue/room1.jpg",
    content: "침실만 따로 있는 공용 셰어하우스입니다. 최대 2인 가능",
    price: 450000
  },
  {
    id : 2,
    title: "Geumsan Apartment Flat",
    image: "https://codingapple1.github.io/vue/room2.jpg",
    content: "금산오거리 역세권 아파트입니다. 애완동물 불가능 ?",
    price: 780000
  },
  {
    id : 3,
    title: "Double styled beds Studio Apt",
    image: "https://codingapple1.github.io/vue/room3.jpg",
    content: "무암동인근 2인용 원룸입니다. 전세 전환가능",
    price: 550000
  },
  {
    id : 4,
    title: "MyeongIl Apartment flat",
    image: "https://codingapple1.github.io/vue/room4.jpg",
    content: "탄천동 아파트 월세, 남향, 역 5분거리, 허위매물아님",
    price: 680000
  },
  {
    id : 5,
    title: "Banziha One Room",
    image: "https://codingapple1.github.io/vue/room5.jpg",
    content: "반지하 원룸입니다. 비올 때 물가끔 새는거 빼면 좋아요",
    price: 370000
  }
];

export default a