[Vue.js] 8. props

props

: 자식컴포넌트가 부모가 가진 데이터를 사용하려면 props로 데이터 전송해줘야함

 

props 사용순서

1. props 보내기
2. props 등록하기
3. props 사용하기

 

1. props 보내기

<자식컴포넌트 v-bind:작명="데이터이름" />
<자식컴포넌트 :작명="데이터이름" /> <!-- 축약ver -->

* 보통 작명은 데이터이름이랑 똑같이 정해줌

 

ex)

<Modal :data="data" /> <!-- props 하나 -->
<Modal :data="data" :isModal="isModal" :clickId="clickId" /> <!-- props 여러개 -->

<!-- data 오브젝트를 나눠서 보내기 -->
<Modal :title="data.title :price="data.price"/>
<Modal v-bind="data" /> <!-- 위와 같음 -->

<!-- 다양한 자료형 직접 입력 가능 -->
<Modal :numbers="[123, 456]" />
<Modal :number="123456" />

<!-- 문자열은 v-bind필요없음 -->
<Modal hello="안녕하세요" />

 

 

2. props 등록하기

props: { 작명: 데이터 자료형 종류 }

ex)

<script>
export default {
    name: 'Modal-product',
    props: {
        data: Array,
        isModal: Boolean,
        clickId: Number,
    },
};
</script>

 

❗ props로 가져온 데이터는 수정 x(=재할당x) read-only임

 

💡 데이터 만들 때는 데이터를 사용하는 곳 중 최상위 컴포넌트에 만들기

 -> 부모에서 자식 전송은 쉽지만 반대는 어려움

 

 

+ 자식 컴포넌트에서 부모 컴포넌트의 데이터를 수정하려면?

1. 부모에게 수정 메시지 보내기
2. 부모는 메시지 수신 후 데이터 수정

 

1. 부모에게 수정 메시지 보내기

$emit('메시지이름')

ex)

<template>
    <div @click="$emit('openModal')"> <!-- 클릭시 openModal(메시지이름)을 부모 컴포넌트로 전송-->
        <h4>{{ data.title }}</h4>
        <p>{{ data.price }}원</p>
    </div>
</template>

 

 

2. 부모는 메시지 수신 후 데이터 수정

<컴포넌트 @메시지이름="메시지내용" />

ex) 

<Card @openModal="isModal = true" /> <!-- isModal을 true로 변경하는 메시지내용 실행 -->

 

 

ex) 새 글 등록하기

<!-- Container.vue -->
<template>
    <div class="write">
        <textarea @input="$emit('write', $event.target.value)">write!</textarea>
    </div>
</template>

<!-- App.vue -->
<template>
    <Container @write="writePost = $event" :postData="postData" :step="step" :image="image" />
<template>

<script>
import Container from './components/Container.vue';
import postData from './data/postData';

export default {
    name: 'App',
    data() {
        return {
            postData: postData,
            moreCount: 0,
            step: 0,
            image: '',
            writePost: '',
        };
    },
    methods: {
        publish() {
            let myPost = {
                postImage: this.image,
                content: this.writePost,
            };
            this.postData.unshift(myPost); // unshift: 제일 앞에 push
            this.setp = 0;
        },
    },
    components: { Container },
};
</script>