src 파일에 component 폴더 생성
src/component/DetailVue.vue
<template>
<div class="wrapper">
<div class="container">
<h2>Detail Page</h2>
<button @click="closeDetail">close</button>
<input type="text" v-model="username" />
<button @click="sendData">send Data</button>
</div>
</div>
</template>
<script>
export default {
name: "displayDetail",
data() {
return {
username: "",
};
},
methods: {
closeDetail() {
this.$emit("closeDetail");
},
sendData() {
this.$emit("sendData", this.username);
},
},
};
</script>
<style>
.wrapper {
background: rgba(0, 0, 0, 0.5);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.container {
background: #fff;
width: 60%;
}
</style>
src/component/GreetingUser.vue
<template>
<div>
<h2 v-bind="$attrs">Hello {{ username }}!!</h2>
<h2>오늘이 {{ numberOfvisit }} 번째 방문입니다.</h2>
<h2>사이트 이름은 {{ siteInfo.name }} 입니다.</h2>
</div>
</template>
<script>
export default {
name: "Greeting User!!",
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>
src/component/ProductItem.vue
<template>
<li>
<p class="title">{{ product.name }}</p>
<p class="image">
<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: Object },
};
</script>
<style scoped>
li {
border: 2px solid salmon;
margin-bottom: 0.5rem;
}
.title {
font-size: 24px;
color: #2c82c9;
font-weight: bold;
}
</style>
src/component/ProductList.vue
<template>
<div>
<ul>
<li>
<ProductItem
v-for="product in products"
:key="product.id"
:product="product"
/>
</li>
</ul>
</div>
</template>
<script>
import ProductItem from "./ProductItme";
export default {
components: {
ProductItem,
},
name: "product-list",
props: {
products: {
type: Array,
default: () => {
return [];
},
},
},
};
</script>
<style></style>
component
app.vue
<template>
<div>
<!-- component -->
<GreetingUser
:username="username"
:numberOfvisit="numberOfvisit"
:siteInfo="siteInfo"
/>
<GreetingUser />
<button @click="changeName()">change</button>
<ul>
<li v-for="product in products" :key="product.id">{{ product }}</li>
</ul>
<ProductList :products="products" />
<GreetingUser id="greeting" />
</div>
</template>
<script>
import GreetingUser from "./components/GreetingUser.vue";
import ProductList from "./components/ProductList.vue";
import DetailVue from "./components/DetailVue.vue";
import CompLevel1 from "./components/provied-inject/CompLevel1.vue";
export default {
name: "App",
components: {
GreetingUser,
ProductList,
DetailVue,
CompLevel1,
},
provide() {
return {
name: this.username,
};
},
data() {
return {
username: "bada",
actionTab: "menu1",
displayDetail: false,
products: [
{
id: 0,
name: "TV",
price: 500000,
company: "LG",
},
{
id: 1,
name: "Moniter",
price: 40000,
company: "Samsung",
},
{
id: 2,
name: "Iphone",
price: 70000,
company: "Apple",
},
],
username: "bada",
numberOfvisit: undefined,
siteInfo: undefined,
};
},
methods: {
changeName() {
this.username = "DDochi";
},
close() {
this.displayDetail = false;
},
showData(data) {
console.log(data);
},
},
directives: {},
computed: {},
watch: {},
};
</script>
<style>
#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;
}
</style>