[Vue] Vue prop 등록 및 사용. 동적 props

사용자 정의 component에서의 prop 정의

<template>
    <div>
    {{content}}
    <p>사용자 정의 Local Component</p>
    message1 is : {{message1}}<br>
    message2 is : {{message2}}
    </div>
</template>

<script>
    export default {
    name : 'LocalComponent',
    props :{
        message1 :{
            type: String,
            default : "값 없음"
        },
        message2 :{
            required : true
        }
    }
}
</script>

<style scoped>
div {
    width: 300px;
    border: solid;
    border-color: rgb(38, 138, 253);
    border-radius: 8px;
    padding: 8px;
    margin :0 auto;
  }

</style>

 

상위 component에서의 prop 전달

v-bind를 사용하여 부모의 데이터에 props를 동적으로 바인딩 할 수 있다. (동적 props)

<template>
  <div id="app">
    <myComponent></myComponent>
    <LocalComponent message1="전달한 prop1" message2="전달한 prop2"></LocalComponent>
    
    <input v-model="inputValue">
    input 내용 : {{inputValue}}

    <LocalComponent v-bind:message1="inputValue"></LocalComponent>

  </div>
</template>

<script>
import LocalComponent from './components/myLocalComponent'

export default{ 
  data(){
    return{
      inputValue : ''
    }
  },
  components : {LocalComponent}
  
}
</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>

 

결과