[9,10,11] Component, props

[9] HTML 복잡해보이면 컴포넌트 Component 만들어 쓰셈

 

 

원하는 html의 한 덩어리를 <모달창/>으로 불러올 수 있다.

 

 

새로운 컴포넌트 만드는 법.

1. 새로운 vue 파일 만들어라

2. 새로운 vue 파일에 덩어리 html을 넣어라

   여기서 < 누르고 자동 완성으로 뷰 형식을 사용해라 (templat, script, style)

(예를 들면 Discount.vue)

<template>
  축약할 HTML~~
</template>

<script>
export default {
  name : '작명',

}
</script>
<style>
  넣을 스타일 
</style>

 

 

 

축약해둔 컴포넌트 쓰는 법

1. vue 파일 import 해온다
2. components: { }에 등록하고
3. 쓰셈
그럼 길고 더러운 HTML을 깔끔하게 한 글자로 축약해서 적어넣을 수 있습니다.

import Discount from './Discount.vue 경로' //1. import하고

export default {
  data() {

  },
  components : {
    Discount, //2. 등록하고
  }
}


<Discount/> //3. 사용하기 여기에 긴 html이 불러옴

컴포넌트 사용하는 법 App.vue	컴포넌트 새로 만들기 Discount.vue
1. import 3. 사용한다 2. 등록한다 2. 이렇게 해도 됨

 

 

컴포넌트는 왜 필요한가?

1. 심미적으로

2. 축약을 해놓으면 이 ui가 반복적으로 출몰하면 재사용이 쉬움

3. 데이터를 한꺼번에 변경할 수 있다

 

 

 

모달을 옮겼더니 왜 html이 안뜨죠??

아 그건.. Discount.vue에 있는 데이터가 App.vue에만 있어서...

 

이래서 컴포넌트 많이 만들면 안 좋은 거임

데이터 관리가 복잡해진다.

데이터 바인딩할 때 귀찮은 일이 생긴다.

 

 

---

[9] 부모가 가진 데이터를 자식이 쓰고 싶으면 props로 전해주셈

[8]처럼 컴포넌트를 만들었으나 오류가 난다. 어떻게 해결하지?

 

 

App.vue에 있는 데이터를
Discount.vue로  데이터를 전달해줘야 사용할 수 있다.

 

 

어떻게 전달해주는가?

컴포넌트는 자기 파일안에 있는 데이터만 쓸 수 있다.

 

 

그럼 두 파일에 데이터를 각각 선언하죠!

App.vue에 있는 데이터를 Modal.vue로 가져오면 복수 데이터가 된다.
그래서 이 방법은 아니다.
데이터는 한 곳에 보관해야한다.

 

부모가 가진 데이터를 자식이 쓰고 싶으면 props로 전해주셈

필요하면 가져다 씀 = props

부모 컴포넌트

자식 컴포넌트

자식 컴포넌트가

부모가 갖고 있는 데이터를 쓰려면

props로 데이터를 전송해야 함

 

 

props로 자식에게 데이터 보내는 법

1. 데이터 보내고
<Modal :원룸들="원룸들" :누른거="누른거" :모달창열렸니="모달창열렸니" />
2. 데이터 등록하고
export default { 
         name: "Modal", 
         props: {원룸들: Object, 누른거: Number, 모달창열렸니: Boolean,  },
 };
3. 쓰셈

<Modal  :원룸들="원룸들" :누른거="누른거" :모달창열렸니="모달창열렸니"  />

 

props: {원룸들: Object, 누른거: Number, 모달창열렸니: Boolean,  }

 

한곳에만 데이터 둬라. 자식이 부모한테 데이터 보내는건 어려움.

 

 

props 보내는 여러가지 방법

// 부모(App.vue)에서 자식(Discount.vue)로
<Discount :데이터이름="[1,2,3]" /> //배열 보내기
<Discount :데이터이름="{ age:20 }" /> // 객체 보내기
<Discount :데이터이름="100" /> // 숫자 보내기
<Discount 데이터이름="안녕하쇼" /> //문자 보내기

오브젝트 : {name : 'kim', age : 20}

<Discount :데이터이름="오브젝트.name" :데이터이름="오브젝트.age"  /> //각각 보내기
<Discount v-bind="오브젝트명" /> // 통째로 보내기

 

 

 

 

 

 

 

 

 

숙제 : 상품 목록 html을 컴포넌트화하기

<product/> 이걸 for문으로 돌리는군... 이런 방법이??

 

App.vue

<template>
  <div class="menu">
    <a v-for="menu in menus" :key="menu">{{ menu }}</a>
  </div>
  {{ logo }}

  <Discount />
  <Modal
    :원룸들="원룸들"
    :누른거="누른거"
    :모달창열렸니="모달창열렸니"
    :신고수="신고수"
  />
  <Product :원룸="원룸들[0]" />
  <Product :원룸="원룸들[1]" />
  <Product :원룸="원룸들[2]" />
  <Product :원룸="원룸들[3]" />
  <Product :원룸="원룸들[4]" />
  <Product :원룸="원룸들[5]" />
  <!-- <div v-for="(product, i) in 원룸들" :key="product">
    <img :src="product.image" class="room-img" />
    {{ product.image }}
    <h4
      class="red"
      :style="스타일"
      @click="
        모달창열렸니 = true;
        누른거 = i;
      "
    >
      {{ product.title }}
    </h4>
    <p>{{ product.price }} 만원</p>
    <button @click="increase(i)">허위 매물 신고</button>
    <span>신고 수: {{ 신고수[i] }}</span>
  </div> -->
</template>

<script>
//데이터 바인딩.. js데이터를 Html에 꽂아넣음
import { apple, data } from "./assets/oneroom.js";
import Discount from "./Discount.vue";
import Modal from "./Modal.vue";
import Product from "./Product.vue";
console.log("apple>>>> ", apple);

export default {
  name: "App",
  data() {
    return {
      누른거: 0,
      원룸들: data,
      모달창열렸니: false,
      신고수: [0, 0, 0],
      menus: ["Home", "Shop", "About"],
      products: ["역삼동 원룸", "천호동 원룸", "마포구 원룸"],
      prices: [70, 60, 50],
      logo: "로고샵",
      스타일: "color : red",
      profileUrl: [
        require("./assets/room0.jpg"),
        require("./assets/room1.jpg"),
        require("./assets/room2.jpg"),
      ],
    };
  },
  methods: {
    increase(i) {
      this.신고수[i] += 1;
    },
  },
  components: {
    Discount: Discount,
    Modal: Modal,
    Product: Product,
  },
};
</script>

<style>
.room-img {
  width: 100%;
  margin-top: 40px;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.menu {
  background: darkslateblue;
  padding: 15px;
  border-radius: 5px;
}
.menu a {
  color: white;
  padding: 10px;
}
body {
  margin: 0;
}
div {
  box-sizing: border-box;
}
.black-bg {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  padding: 20px;
}
.white-bg {
  width: 100%;
  background: beige;
  border-radius: 8px;
  padding: 20px;
}
</style>

 

 

 

Product.vue

<template>
  <div>
    <img :src="원룸.image" class="room-img" />
    {{ 원룸.image }}
    <h4 class="red">
      {{ 원룸.title }}
    </h4>
    <p>{{ 원룸.price }} 만원</p>
  </div>
</template>

<script>
export default {
  name: "Product",
  props: {
    원룸: Object,
  },
};
</script>

<style></style>

 

 

컴포넌트를 for문으로 돌리는 방법

v-for="원소 in 원소들" :key="원소"
<Product :원룸="원룸들[i]" v-for="(작명, i) in 원룸들" :key="작명" />