반응형
- 더하기 문제 맞추기 예시를 활용한 컴포넌트 생성을 활용해 props 속성과 v-bind에 대해 정리
- 컴포넌트 이용해 서로 다른 더하기 문제 맞추기 예시를 두개 만들었었음
- props 속성을 사용하면 두개의 기능을 조금씩 다르게 만들 수 있음
- 하나는 더하기 문제를, 다른 하나는 곱하기 문제를 내도록 바꿔봄
동적 props 전달
<plus_test operator="+"></plus_test>
<plus_test operator="*"></plus_test>- 다음과 같이 컴포넌트를 생성할 때, operator에 하나는 '+', 다른 하나는 '*'를 넣어서 전송함
- 그리고 Vue 컴포넌트 안에 아래와 같이 props 속성을 추가함 ( 3가지 방법 )
// 방법 1
props: ['operator'],
// 방법 2
props: {
operator: String,
},
// 방법 3
props: {
operator: {
type: String
},
},props 속성 사용
- template의 출력하는 부분은 아래와 같이 수정
<div>{{num1}} {{operator}} {{num2}} = ?</div>- SubmitForm 메소드의 조건문을 아래와 같이 수정
if(this.operator=='+' && this.num1 + this.num2 == this.input){
...
} else if(this.operator=='*' && this.num1 * this.num2 == this.input) {
...
} else{
...
}- 다음과 같은 결과를 얻을 수 있음
v-bind (정적 props 전달)
<plus_test operator="+"></plus_test>- 위에서 사용한 동적 props 전달 코드, 동적으로 전달시 String 형식으로만 전달 가능
- Number, Boolean, Object, 등의 형식은 아래와 같이 v-bind를 사용해 정적으로 전달해야 함
<plus_test v-bind:operator=`+`></plus_test>
<plus_test v-bind:type-string=`String`></plus_test>
<plus_test v-bind:type-number="11"></plus_test>
<plus_test v-bind:type-boolean="true"></plus_test>
<plus_test v-bind:type-object="{name:'park', age:17}"></plus_test>- 이 때, String 형식은 ` ` 을 사용해야하고, 나머지는 " " 을 사용해야 함
주의할 점 (camelCase, kebab-case)
- 만약 javascript에서 camelCase 형식(대문자사용)으로 이름을 지정해 주었다면,
HTML에서는 대소문자 구분을 안하기 때문에 kebab-case 형식(하이픈구분)을 사용해 주어야 함- <script> myOperator = <HTML> my-operator
반응형
'Vue.js' 카테고리의 다른 글
| [Vue.js] Vue Cli 설치방법 및 실행방법 (0) | 2021.11.25 |
|---|---|
| [Vue.js] v-for(index), 배열 (0) | 2021.08.22 |
| [Vue.js] 컴포넌트(전역 컴포넌트, 지역 컴포넌트) (0) | 2021.08.20 |
| [Vue.js] v-model, v-on:submit, 랜덤숫자생성, event.preventDefault() (0) | 2021.08.20 |
| [Vue.js] v-if, v-else, v-else-if, v-on:click (0) | 2021.08.19 |