Vue.js Props 보낼때 다양한 방법 :작명="데이터이름"

2021. 4. 11. 11:12 공부/Vue.js

예를들어 App.vue 부모 컴포넌트가 있고

File.vue라는 자식 컴포넌트가 있을 시

부모에 있는 데이터들을 File.vue인 자식에게 Props 시키고싶을때 

 

<!-- 기본 -->
<File :작명(또는데이터이름그대로)="데이터이름"/>

<!-- Array나 Object 그대로 보내기 -->
<File :데이터이름="[123,456]"/>

<!-- 간단한 문자열들은 v-bind문법없이도 바로 보낼수있다
	글자는 v-bind없이 바로바로 간다 -->
<File 데이터이름="안녕하세요문자자료"/>
<File :데이터이름="12344(숫자자료)"/>

<!-- Object 데이터들을 한번에 간단히 축약해서 보내는법 -->
<File :이름="오브젝트.name" :나이="오브젝트.age"/>

<!-- 이렇게 이름만 써도 됌. 한번에 보내는방법. -->
<File v-bind="오브젝트"/>

<!-- 또는 그냥 이렇게 보내도 똑같음 -->
<File :오브젝트="오브젝트"/>

 

예를들어 App.vue 부모 컴포넌트가 있고

File.vue라는 자식 컴포넌트가 있을 시

부모에 있는 데이터들을 File.vue인 자식에게 Props 시키고싶을때 

 

<!-- 기본 -->
<File :작명(또는데이터이름그대로)="데이터이름"/>

<!-- Array나 Object 그대로 보내기 -->
<File :데이터이름="[123,456]"/>

<!-- 간단한 문자열들은 v-bind문법없이도 바로 보낼수있다
	글자는 v-bind없이 바로바로 간다 -->
<File 데이터이름="안녕하세요문자자료"/>
<File :데이터이름="12344(숫자자료)"/>

<!-- Object 데이터들을 한번에 간단히 축약해서 보내는법 -->
<File :이름="오브젝트.name" :나이="오브젝트.age"/>

<!-- 이렇게 이름만 써도 됌. 한번에 보내는방법. -->
<File v-bind="오브젝트"/>

<!-- 또는 그냥 이렇게 보내도 똑같음 -->
<File :오브젝트="오브젝트"/>