Vue에서 컴포넌트 만들어 사용하기 3단계

공부에 흥미가 조금 줄어들 즈음 미뤄뒀던 Vue를 공부해보기로 했다

Vue에서 컴포넌트를 만들어 사용하는 법을 알아보자 !
반드시 이 순서일 필요는 없지만

---

1. 컴포넌트를 만든다 !

• template 태그 내부에선 HTML을 작성해주면 되고

• export default 객체 내부에는 이름과 사용할 프롭스를 담을 객체에게 타입을 지정해준다 에러는 나지 않지만 명시적으로 작성해줌

<template>
  <div class="modal-black-bg" v-if="detailModalView === true">
    <div class="modal-white-bg">
      <img class="modal-img" :src="oneRooms[detailIndex].image" alt="" />
      <h4>{{ oneRooms[detailIndex].title }}</h4>
      <p>{{ oneRooms[detailIndex].content }}</p>
      <p>보증금 : {{ oneRooms[detailIndex].deposit }}</p>
      <p>월세 : {{ oneRooms[detailIndex].monRent }}</p>
      <button @click="$emit('modalOff')">닫기</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailModal',
  props: { oneRooms: Array, detailIndex: Number, detailModalView: Boolean },
};
</script>

<style>
.modal-black-bg {
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  position: fixed;
  padding: 20px;
}
.modal-white-bg {
  background: white;
  width: 100%;
  border-radius: 8px;
  padding: 20px;
  margin-top: 40px;
}
.modal-img {
  width: 100%;
}
</style>

2 && 3. 부모 컴포넌트에서 import 해준다 !

• script 태그 내부에 import 작명 from '경로'를 사용하여 내가 만든 작고 이쁜 컴포넌트를 가져온다
• export default 내부에 components 객체에 내가 가져온 컴포넌트를 사용할 수 있도록 한다
• 이제 template 내부에서 맘껏 사용하라 !

<template>
  <DetailModal
    @modalOff="detailModalView = false"
    :oneRooms="oneRooms"
    :detailIndex="detailIndex"
    :detailModalView="detailModalView"
  />
</template>

<script>
import oneRooms from './db/data';
import DetailModal from './components/DetailModal.vue';

export default {
  name: 'App',
  data() {
    return {
      detailIndex: 0,
      oneRooms: oneRooms,
      detailModalView: false,
    };
  },
  methods: {},

  components: { DetailModal: DetailModal, RoomItem: RoomItem, NavBar: NavBar },
};
</script>

<style>
body {
  margin: 0;
  text-align: center;
}
div {
  box-sizing: border-box;
}
</style>

2단계 같은 3단계가 끝났다
리엑트에 익숙해져서 그런지 낯설지만 더 간단하게 느껴진다