[SI에서 살아남기] Props, v-model 에 대한 이해와 예시 Vue.js [2]

Props

• 부모 컴포넌트와 자식 컴포넌트 사이의 타입 설정 및 사용
• 보기에도 편리하고 입력 유효성검사에도 효율적임.

//memberId.vue
<script>
  export default{
	name:'member-id',
    props:{
    	name:{
        	type:String
        },
        id:{
        	type:String
        }
        age:{
        	type:int
        }
    }
  }
</script>

//main.vue
<div id="app">
	<member-id
    name="뚝딱이"
    id="ddacker"
    age="27"
    >
    </member-id>
</div>
<script>
	import member from 'memberId'
    new Vue({
    	el:'#app'
    });
    Vue.compnent(member.name,member);
</script>

 위에 코드 처럼 다른 곳에서 사용하게끔하면 파일관리에도 좋고 입력유효성 검사에도 효율적이다.

단편적인 코드만 작성하여, 코드 실행이 불가 할 수도 있습니다. 

 

v-model

• 양방향 통신이 가능토록 하는 것 
• v-bind과 비교하면 좋을 것 같음.

<div id="app">
	<input type="text" v-if="check" v-model="name">
    <h1>{{name}}</h1>
</div>
<script>
	new Vue{
    	el:"#app",
        data(){
        	return{
            	name:"A",
                check:"true"
        	}
        }
    }
</script>

v-bind와는 확실히 비교되는 점은 양방향 통신이라는 점이다. v-bind는 한데이터와 단방향으로 연결이 되지만 v-model 같은 경우는 값의 변경에 따라 서로 변경이 된다.

 

위의 코드는 처음에 A만 덩그러니 있지만 input에 값을 입력하면 A는 사라지고 입력한 값들을 받는다.

 

지금까지 기본적인 디렉티브를 알아보았는데, 실제 필자가 회사 내에서 공부해야할 부분만 단편적으로 적었다.

앞으로는 코드와 함께 공부할 예정이다.

 

 

본 글은 다소 주관적인 생각들을 포함하고 있어, 잘못된 정보를 제공할 수도 있습니다. 부족한 점이 있으면 댓글 남겨주세요. 추가 및 수정 하도록 하겠습니다. 감사합니다.