반응형
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 받아서 처리
반응형
'Web > Vue' 카테고리의 다른 글
| [Vue] Component5 , keep-alive, dynamic component (0) | 2022.06.29 |
|---|---|
| [Vue] Component4, your input is (0) | 2022.06.29 |
| [Vue] Component 2 (0) | 2022.06.25 |
| [Vue] Component 1 (0) | 2022.06.25 |
| [Vue] Watch (0) | 2022.06.25 |
