[Vue] Component 3

App.vue

<template>
  <div>
    <GreetingUser id="greeting"></GreetingUser>
  </div>
</template>
<script>
import GreetingUser from "./components/GreetingUser";
export default {
  name: "App",
  components: {
    GreetingUser,
    // ProductList,
  },
  data() {
    return {
      // products: [
      //   { id: 0, name: "TV", price: 500000, company: "LG" },
      //   { id: 1, name: "전자렌지", price: 200000, company: "삼성" },
      //   { id: 2, name: "가스오븐", price: 300000, company: "한화" },
      //   { id: 3, name: "냉장고", price: 50000, company: "대우" },
      //   { id: 4, name: "에어컨", price: 1000000, company: "해태" },
      // ],
    };
  },
  methods: {},
};
</script>

<style></style>

 

GreetingUser.vue

<template>
  <div>
    <h2 v-bind="$attrs">Hello {{ username }}</h2>
    <h3 v-bind="$attrs">오늘이 {{ numberOfVisit }} 번째 방문입니다.</h3>
    <h3>사이트 이름은 {{ siteInfo.name }}입니다</h3>
  </div>
</template>
<script>
export default {
  name: "GreetingUser",
  inheritAttrs: false,
  props: {
    //username: String,
    username: {
      type: String,
      default: "user!",
    },
    numberOfVisit: {
      type: Number,
      default: 0,
    },
    siteInfo: {
      type: Object,
      default: () => {
        return { name: "-", teacher: "-" };
      },
    },
  },
};
</script>
<style scoped></style>

 

 

ProductList.vue

<template>
  <div>
    <ul>
      <ProductItem
        v-for="product in products"
        :key="product.id"
        :product="product"
      ></ProductItem>
    </ul>
    <ProductItem />
  </div>
</template>

<script>
import ProductItem from "./ProductItem";

export default {
  name: "product-list",
  components: {
    ProductItem,
  },
  props: {
    products: {
      type: Array,
      default() {
        return [];
      },
    },
  },
};
</script>

<style></style>

 

 

 

ProductItem.vue

<template>
  <li>
    <p class="title">{{ product.name }}</p>
    <p>
      <img
        :src="`https://placeimg.com/200/100/${product.id}`"
        :alt="product.name"
      />
    </p>
    <p class="price">{{ product.price }}</p>
  </li>
</template>

<script>
export default {
  name: "product-item",
  props: {
    product: {
      type: Object,
      default: () => {
        return { id: 0, name: "TV", price: 500000, company: "LG" };
      },
    },
  },
};
</script>

<style scoped>
li {
  border: 2px solid salmon;
  margin-bottom: 0.5rem;
}

.title {
  font-size: 24px;
  color: #2c82c9;
  font-weight: bold;
}
</style>

 

 

vue Component 사용법

1. import

2. components object 추가

3. props value 넘겨줌

4. 컴포넌트에서 props 받아서 처리