웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
VueJS에서 props로 콜론이 사용된 경우를 쉽게 볼 수 있습니다. 이때 콜론이 단독으로 사용된 경우도 볼 수 있는데 아래처럼 말이죠.
여기서의 : 기호는 short-hand인 단축 키워드로 사용되었으며 이처럼 v-bind: 대신에 :을 사용할 수 있습니다. 아래의 예제코드를 보세요.
위 두 컴포넌트에 사용된 prop 모두 동일합니다. 둘 다 do-something의 prop에 특정한 값을 전달하고 있습니다.
: 콜론 기호를 사용하는 것과의 차이점은 문자열로 볼 것인지... 아니면 VueJS에서 사용되는 자바스크립트로 인식될 것인지의 차이입니다. 만약 :이 사용된 props 내부에서 문자열을 쓰려면 따옴표를 추가해야합니다.
위에 myComponent에 사용된 name은 VueJS에서 선언된 name이 아니라 따옴표를 사용하였으므로 문자열 값인 name으로 인식하게될 것 입니다.
여기서의 : 기호는 short-hand인 단축 키워드로 사용되었으며 이처럼 v-bind: 대신에 :을 사용할 수 있습니다. 아래의 예제코드를 보세요.
<myComponent v-bind:do-something="..." />
<myComponent :do-something="..." />
<myComponent :do-something="..." />
위 두 컴포넌트에 사용된 prop 모두 동일합니다. 둘 다 do-something의 prop에 특정한 값을 전달하고 있습니다.
: 콜론 기호를 사용하는 것과의 차이점은 문자열로 볼 것인지... 아니면 VueJS에서 사용되는 자바스크립트로 인식될 것인지의 차이입니다. 만약 :이 사용된 props 내부에서 문자열을 쓰려면 따옴표를 추가해야합니다.
data: {
name: "webisfree"
}
...
<myComponent :do-something=" 'name' " />
name: "webisfree"
}
...
<myComponent :do-something=" 'name' " />
위에 myComponent에 사용된 name은 VueJS에서 선언된 name이 아니라 따옴표를 사용하였으므로 문자열 값인 name으로 인식하게될 것 입니다.
아래의 글도 찾고 계시지 않나요?
