component props

컴포넌트 사용의 큰 이유는 재사용성이다. 이를 위해 함수 인자로 받는 방식과 유사한 props라는 속성을 정의하여 사용한다. 컴포넌트를 사용하는 부분에서 넘겨준 데이터를 사용하는 것이다.

 

msg에 다음과 같이 4개의 값들을 사용했다.

1. type 은 props로 받을 데이터 타입을 의미한다. 다를 경우 콘솔에 에러 메세지를 출력한다. 

2. default 은 컴포넌트 사용시 msg의 값이 할당되지 않으면 사용할 값이다.

3.  required가 true이면 컴포넌트 사용시 msg props에 값을 넣어주어야한다. 값이 할당되지 않으면 콘솔에 에러를 출력한다.

4. validator은 유효성 검사를 위한 함수이다. value는 msg에 할당된 값이며 이를 이용해 필요한 검사를 실시한다. boolean 값을 리턴하며 false일 경우에 콘솔에 에러를 출력한다.

 

html에서 :msg="message" 를 해석해보면 props인 msg에 Vue 바인딩된 message 값을 사용한다는 뜻이다.

msg = "Hello" 가 결과적으로 된다.