hands on vue - props 상세설정 (type, required, default 등..)

[목표]

1. 부모컴포넌트가 넘겨준 데이터를

자식 컴포넌트에서 props로 받았다.

 

만약 오지 않았다면?

원하지 않는 타입이라면?

필수적으로 넘어와야 되는 데이터라면?

 

이런 것들을 상세설정하는 속성이 있다.

 

---

 

props 상세 설정 전과 후

type은 말그대로 넘어오는 타입이다.

required는 필수적인지 아닌지 설정하는 것이다.

default는 넘어오지 않았다면 기본값은 어떻게 하는지다.

 

만약 필수설정을 했는데 안넘어온다면 어떻게 보일까?

---

 

왼쪽은 부모인 App.vue 오른쪽은 자식인 FriendContact.vue

phoneNumber를 requried: true로 했는데 보내지 않았다면

console에 다음과 같이 뜬다.

연습해보려면 아래 소스 첨부한다.

[App.vue]

<template>
<section>
    <ul>
        <friend-contact 
            name="Manuel Lorenez" 
            phone-number="1234-5678-111" 
            email-address="gnsdl9079@gmail.com"
            is-favorite="1" 
            >
            <!-- 1일때 true, 0일때 false -->
        </friend-contact>
        
        <friend-contact 
            name="Tom Hoon" 
            email-address="gnsdl9079@gmail.com"
            is-favorite="0"
            >
        </friend-contact>

    </ul>
</section>
</template>

<script>
import FriendContact from './components/FriendContact.vue'

    export default{
  components: { FriendContact },
        data(){
            return{
                friends:[
                    {
                       id: 'manuel',
                       name: 'Manuel Lorenz',
                       phone: '1234 5678 90', 
                       email: 'manuel@localhost.com'
                    },
                    {
                       id: 'tom',
                       name: 'Tom Hoon',
                       phone: '9281 238 2910', 
                       email: 'tomhoon@localhost.com'
                    },
                ],
            }
        },
        methods: {

        },
        computed: {

        }
    }
</script>
<style>
/* @import url('https://fonts.googleapis.com/css2?family=Jost&display=swap'); */
* {
  box-sizing: border-box;
}

html {
  font-family: 'Jost', sans-serif;
}

body {
  margin: 0;
}

header {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  margin: 3rem auto;
  border-radius: 10px;
  padding: 1rem;
  background-color: #58004d;
  color: white;
  text-align: center;
  width: 90%;
  max-width: 40rem;
}

#app ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#app li {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  margin: 1rem auto;
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
  width: 90%;
  max-width: 40rem;
}

#app h2 {
  font-size: 2rem;
  border-bottom: 4px solid #ccc;
  color: #58004d;
  margin: 0 0 1rem 0;
}

#app button {
  font: inherit;
  cursor: pointer;
  border: 1px solid #ff0077;
  background-color: #ff0077;
  color: white;
  padding: 0.05rem 1rem;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);
}

#app button:hover,
#app button:active {
  background-color: #ec3169;
  border-color: #ec3169;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
}

</style>

[FriendContact.vue]

// FriendContace.vue 소스
<template>
    <li>
        <button @click="toggleFavorite">Favorite Change</button>
        <h2>{{name}} {{isFavorite_child? 'Favorite' : ''}}</h2>
        <button @click="toggleDetails">{{detailVisible ? 'Hide' : 'Show'}}Details</button>
        <ul v-if="detailVisible == true">
            <li>
                <strong>NAME: </strong>
                {{name}}
            </li>
            <li>
                <strong>PHONE: </strong>
                {{phoneNumber}}
            </li>
            <li>
                <strong>EMAIL: </strong>
                {{emailAddress}}
            </li>
        </ul>
    </li>
</template>

<script>
export default{
    props: {
        name: {
            type: String,
            requried: true
        },
        phoneNumber:{
            type: String,
            required: true
        },
        emailAddress:{
            type: String,
            requried: true
        },
        isFavorite:{
            type: String,
            required: false,
            defualt: '0',
            validator: function(value){
                return value === '1 ' || value === '0';
            }
        },
    },
    data(){
        return{
            friend: {
                id: 'manuel',
                name: 'Manuel Lorenz',
                phone: '1234 5678 90', 
                email: 'manuel@localhost.com'
            },
            detailVisible: false,
            isFavorite_child: false,
        }
    },
    methods: {
        toggleDetails() {
            this.detailVisible = !this.detailVisible;
        },
        toggleFavorite(){
            this.isFavorite_child = !this.isFavorite_child;
        }
    },
    
}
</script>

[main.js]

import { createApp } from 'vue';
import App from './App.vue';
import FriendContact from './components/FriendContact.vue';

const app = createApp(App);
app.component('friend-contact', FriendContact);
// app.component('사용할 태그명', 태그명 적용파일);
app.mount('#app');