props static way & dynamic way - vue

vue에서도 react처럼 자식 컴포넌트에게 props를 넘겨줄 수 있다.

자식 컴포넌트에서는 부모가 내려준 props를,

1. 자신의 data로 사용할 수도 있고
2. 조건부 렌더링의 조건으로만 사용할 수도 있을 것이다.

부모 컴포넌트

Parent.vue

1. Passing props by static way

   <template>
    <div>
        <Child msg="giveprops"></Child>
        위아래 모두 같은 값을 다른 표현으로 props 넘겨주고 있다.
        <Child :msg="giveprops"></Child>
    </div>
   </template>
   
   

부모로부터 변동되지 않는 값을 자식에게 넘겨줄 땐,
정적인 props로 넘겨준다.

2. Passing Dynamic props way

   <template>
    <div>
        <input v-model="parentMsg">
        <br>
        <Child v-bind:msg="parentMsg"></Child>
    </div>
   </template>
   
   

dynamic way는,
부모 컴포넌트에서 parentMsg를 입력 또는 수정할 때 마다 변동되는 data가 props를 통해 자식에게 전달된다.

자식 컴포넌트

<template>
    <div>
        <div>{{ msg }}</div>
        부모가 넘겨준 giveprops라는 것이 렌더될 것이다.
    </div>
</template>

<script>
export default {
    props: ['msg']
}
</script>