Vue.js Props 보낼때 다양한 방법 :작명="데이터이름"
2021. 4. 11. 11:12
예를들어 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 :오브젝트="오브젝트"/>
'공부 > Vue.js' 카테고리의 다른 글
Vue.js input박스, 숫자 곱하기 및 더하기 (0) | 2021.04.11 |
---|---|
Vue.js 커스텀이벤트 Custom Event - 부모 컴포넌트의 데이터를 수정하고 싶을때 (0) | 2021.04.11 |
vue.js 컴포넌트 component 만드는 방법, Props - 깔끔하게 html 만들기 (0) | 2021.04.10 |
vue.js import/export 시키기 (0) | 2021.04.10 |
vue.js 조건문 기본 문법 (0) | 2021.04.10 |