[Vue.js 3] v-bind / v-model, v-for, v-show / v-if, emit / props

프로젝트로 배우는 Vue.js 3

이 포스팅에서 작성하는 내용은 프로젝트로 배우는 Vue.js 3 에서 발췌하였습니다.

 

https://inf.run/sxQT

프로젝트로 배우는 Vue.js 3 - 인프런 | 강의

---

v-bind / v-model

v-bind

• 단방향 데이터 바인딩 시, 사용
• v-bind 키워드 생략 가능해서 사용 가능
  (v-bind:value == :value)
• 아래 예시에서는 bindTest라는 변수의 값이 input value로 설정되도록 함
  (단방향 바인딩이기 때문에 input value 가 변경되도 bindTest의 값은 변하지 않음)
• 아래 예시에서는 input value로 예를 들었지만, type class 등 다양하게 사용할 수 있다.
  (v-bind:type / v-bind:class)

 

참고) v-on 키워드도 생략가능해서 사용 가능하다.

(v-on:click == @click)

<template>
  {{ bindTest }}
  <input type="text" v-bind:value="bindTest"/>
  <button 
    class="btn btn-primary"
    v-on:click="updateBindTest"
  >
  값 변경
  </button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    let bindTest = ref("binding");
    const updateBindTest = () => {
      bindTest.value = "changedBinding"
    }
    return {
      bindTest,
      updateBindTest
    };
  }
}
</script>

 

v-model

• 단방향 바인딩인 v-bind 와는 달리, 양방향 바인딩이 가능

 

 

v-for

• 특정 배열을 값을 탐색하면서 반복할 수 있는 기능
• v-for 를 사용하면 :key가 필수적으로 설정되어야 함.
  :key ? 각 반복문의 유니크한 값.
• 아래 예제의 경우, todos 가 배열이고 t라는 변수에 하나씩 꺼내서 확인

<div
  v-for="t in todos"
  :key="t.id"
>
  <div>
    {{ t.subject }}
  </div>
</div>

 

 

 

v-show / v-if

해당 조건이 true를 만족하면, 요소(element)를 보여주는 기능

 

v-show

• 모든 요소를 렌더링하고, 변수의 값이 true가 아닌 요소들을 display none 으로 변경해서 안보이도록 함
• 모든 요소를 렌더링 하기 때문에, 초기 로딩에는 비용이 많이 들지만, 이후에는 간단하게 css로만 수정하기 때문에 변경이 잦을 경우 사용하면 좋음

 

v-if

• v-if와 v-else 가 함께 사용될 수 있음
• 조건을 만족하지 않는 요소는 렌더링 자체를 안함
• 필요한 요소만 렌더링하기 때문에 초기 로딩에는 비용이 적게 들지만, 이후 변경할 때마다 새로 렌더링을 해야 하므로 변경이 적을 때 사용하면 좋음

<!-- v-show -->
<div v-show="hasError">
  Error Ouccured!
</div>

<!-- v-if -->
<div v-if="hasError">
  Error Ouccured!
</div>

 

 

 

emit / props

emit

• 자식 컴포넌트에서 부모 컴포넌트로 데이터를 보내는 기능
• 아래 예제에서는 자식컴포넌트의 childData를 context.emit 을 이용해서 부모컴포넌트로 보냄
• 자식 컴포넌트에서의 emits 는 vue3 에서 추가된 기능으로, 해당 컴포넌트에서의 emit들을 모아둔 공간이라고 보면 된다. (emits를 사용하지 않아도 에러는 나지 않지만 경고가 발생)

<!-- 부모 컴포넌트 -->
<template>
  <div>
    <ChildComponent @alert-event="alertEvent" />
  </div>
</template>

<script>
import ChildComponent from './components/ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const alertEvent = (data) => {
      alert(data);	// 'child'
    };
    
    return {
      alertEvent
    }
  }
}
</script>

<!-- 자식 컴포넌트(ChildComponent) -->
<template>
  <button @click="onClick">전송</button>
</template>

<script>
export default {
  emits: ['alert-event'],
  setup(props, context) {
    const childData = 'child';
    const onClick = () => {
      context.emit('alert-event', childData);
    };
    return {
      onClick
    }
  }
}
</script>

<style></style>

 

props

• 부모 컴포넌트에서 자식 컴포넌트로 데이터를 보내는 기능
• 아래 예제에서는 parentData 를 자식 컴포넌트로 보냄

<!-- 부모 컴포넌트 -->
<template>
  <div>
    <ChildComponent :parentData="myData" />
  </div>
</template>

<script>
import TodoSimpleForm from './components/ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const myData = "hi";
    
    return {
      myData
    };
  }
}
</script>

<!-- 자식 컴포넌트(ChildComponent) -->
<template>
  {{ parentData }} 	<!-- hi -->
</template>

<script>
export default {
  props: ['parentData']
}
</script>

<style></style>