ㅈㅔ일 부모 컴포넌트라고 가정하고 보자!
// ***************** App.vue
<template>
// * 하단에 설명 기재
<Banner v-bind:appValue="count"></Banner>
<ul>
<li v-for="(item, index) in products">
<h4 :style="red">{{ index }} 번</h4>
<div>{{ item.title }}</div>
<img @click="onPopup(item)" :src="item.image" alt=""/>
<button @click="item.count++"> ❤️ {{ item.count }}</button>
</li>
</ul>
<!-- 팝업 -->
<!-- v-bind:자식컴포넌트에 사용할 변수명="현재 컴포넌트 내의 modalItem" / @자식컴포넌트에서 작명한 변수명="현재 컴포넌트에서 자식컴포넌트의 데이터를 받을 메소드명" -->
<!-- v-bind를 제외 :modalItem도 가능 -->
<!-- 여러개 보낼 때 :item1="" :item2="" -->
<Modal v-bind:modalItem="modalItem" v-if="modal" @closeFromModal="onModalState"/>
</template>
<script>
import testData from './assets/data/data';
// 컴포넌트 import
import Banner from './components/Banner.vue';
import Modal from './components/Modal.vue';
export default {
name: 'App',
// state(변수 입력하는 곳)
data(){
return{
// 다른 js파일의 데이터를 가져온것임(객체형태)
products: testData,
modalItem: undefined,
count: 100,
}
}
// 함수 만드는 곳
methods: {
onPopup(item){
// modal창을 보여줌
this.modal = true;
// 자식 컴포넌트(modal)에 보낼 값을 넣어줌
this.modalItem = item;
},
onModalState(state){
console.log('modal에서 가져온 값', state)
this.modal = state; // false
}
},
// 컴포넌트 가져오는 곳
components: {
// 원하는태그이름 :Banner --> 원하는대로 작명할 수 있음
Banner, // 축약된 형태
Modal
}
}
</script>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
#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;
}
ul,
.menu{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.menu{
padding: 0 20px;
background: cornflowerblue;
height: 50px;
border-radius: 8px;
}
img{
width: 100%;
height: 30vw;
object-fit: cover;
}
ul{
padding: 20px;
}
ul li {
/* width: 100%; */
width: 30%;
list-style: none;
margin-right: 10px;
margin-bottom: 30px;
}
button{
margin-top: 10px;
}
</style>
컴포넌트 가져오는 법
- template에 컴포넌트 태그 입력해줌
- script 내 component import
- script 내 components에 컴포넌트 명 입력
Banner컴포넌트의 style은 Banner.vue 파일에서 적용되어 오기 때문에 생략한다!
컴포넌트간 데이터 전송하는법
app.vue 파일에 보면 Banner태그 옆에 v-bind:appValue="count" 라고 적혀있는 것이 자식 컴포넌트에 props 값을 전달하는 방법이다
v-bind는 속성에 데이터를 연결할 때 사용(축약된 형태로는 :만 속성 앞에 붙여서 사용한다)
:id="", :class="", :href="" 등
appValue는 자식 컴포넌트에 기재 된 변수명, ( ** banner.vue 파일을 확인)
count는 부모 컴포넌트에서 어떤 값을 보낼지에 따라 해당 변수명을 적어준다(여기서 count는 100임)
// ***************** Banner.vue
<template>
<div class="banner" @click="onClick()">
<p>클릭시 부모 컴포넌트의 count 값을 콘솔창에 찍는다</p>
<button @click="onParentValue()">클릭시 부모 component의 data값 변경</button>
</div>
</template>
<script>
export default {
name: 'Banner',
// 부모 component에서 입력한 props명을 적어줌
props: ["appValue"],
methods: {
onClick(){
// 클릭시 부모 컴포넌트의 count 값을 콘솔창에 찍는다
console.log(' -> ', this.appValue) // -> 100
},
onParentValue(){
this.$emit("childEvent")
}
}
}
</script>
<style>
.banner{
width: 90%;
background: lightgray;
padding: 10px;
box-sizing: border-box;
margin: 10px auto;
}
</style>
props: 에 appVaule로 부모 컴포넌트에서 가져온 값을 받을 변수명을 입력해준다
값이 여러개라면 ["appValue", "appList"] 이런식으로 여러개 입력하면 됨
예를 들어 modal 컴포넌트가 있다고 했을 때
// ***************** Modal.vue
<template>
<div class="modal-bg" @click="onClose()">
<div class="modal">
<p class="title">팝업창</p>
<Banner/>
<div class="content">
<p>{{ modalItem.title }}</p>
<img :src="modalItem.image" :alt="modalItem.image" />
<p>{{ modalItem.content }}</p>
<p>금액: {{ modalItem.price }}, 좋아요 수: {{ modalItem.count }}</p>
</div>
</div>
</div>
</template>
<script>
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: 'Modal',
props: ["modalItem"],
data(){
// state 값
return {
}
},
// 함수 만드는 곳
methods: {
onClose(){
this.$emit("closeFromModal", false )
}
},
components: {
}
}
</script>
<style>
.modal-bg{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .3);
}
.modal-bg .modal{
width: 80%;
height: 500px;
background: white;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 20px;
padding: 20px;
overflow: scroll;
}
.modal .title{
font-size: 20px;
font-weight: bold;
margin-bottom: 30px;
}
.modal img{
width: 100%;
height: 100%;
object-fit: cover;
margin: 20px 0;
}
</style>
modalItem 값을 props로 받아서 전달된 데이터로 화면에 보여주고
화면을 닫을 땐 emit으로 false값을 전달하여 자식 컴포넌트를 닫아준다
끝!
정리하자면
부모 컴포넌트 -> 자식 컴포넌트
- (부모 컴포넌트) html 컴포넌트 태그에 :변수명(작명)="보낼값이 들어있는변수" 입력
ex) 예를 들어 :이거옮길것임="itemList"
- (자식 컴포넌트) props:에 변수명(작명)했던 거 등록해
ex) props: ["이거옮길것임", "이거옮길것임2(여러개일때)"]
ex) props: {
"이거옮길것임": Array
},
