Vue 컴포넌트 개념

컴포넌트 특징

• 독립적인 단위 모듈
• 구현,명세화,패키지화,배포가 될 수 있어야 함
• 하나의 컴포넌트는 하나 이상의 클래스로 구성될 수 있음

컴포넌트 종류

• page : 모든 구성요소를 포함하는 가장 큰 단위
• dialog : 대화상자
• header bar : 상단에 위치하면서 제목을 표시하고 페이지 이동과 관련된 버튼이 위치
• footer bar : 페이지 하단에 위치하면서 버튼이 위치
• navbars : 일반적으로 header bar나 footer bar 내에 위치하면서 특정한 페이지로 이동하는 메뉴의 역활
• button : 버튼
• form : 사용자로부터 데이터를 입력받는 컨트롤
• list view : 여러개의 항목을 열거하는데 사용되는 컨트롤

컴포넌트 선언

상위(부모) 컴포넌트가 하위(자식) 컴포넌트를 호출하여 사용가능 함

• 부모 컴포넌트

<script>
import ChildComp from './ChildComp.vue'

export default {
  components: { // 자식 컴포넌트 선언
    ChildComp
  }
}
</script>

<template>
  <ChildComp /> <!--자식 컴포넌트 호출 할때-->
</template>

• 자식 컴포넌트

<template>
  <h2>자식 컴포넌트가 호출되면 이게 나와요</h2>
</template>

컴포넌트 관련 속성

Watch

• 값이 변경되는 것을 실시간으로 확인하고 변경 되었을때 해당 함수를 실행함

<script>
watch: {
    locale(newlocale) {
      localStorage.setItem('locale', newlocale);
    },
  }
</script>

<template>
      <select class="form-select" v-model="locale">
        <option>ko</option>
        <option>en</option>
      </select>
</template>

Props

부모 컴포넌트는 자식 컴포넌트에 props를 통해 데이터 전달 가능

• 부모 컴포넌트

<script>
import ChildComp from './ChildComp.vue'

export default {
  components: {
    ChildComp
  },
  data() {
    return {
      greeting: '부모 컴포넌트로부터 전달받았어요!'
    }
  }
}
</script>

<template>
  <ChildComp :msg="greeting" />
</template>

• 자식 컴포넌트

<script>
export default {
  props: {
    msg: String
  }
}
</script>

<template>
  <h2>{{ msg || 'prop이 아직 전달되지 않았습니다!' }}</h2>
</template>

Emits

자식 컴포넌트가 부모 컴포넌트한테 emit를 통해 데이터 전달 가능

• 부모 컴포넌트

<script>
import ChildComp from './ChildComp.vue'

export default {
  components: {
    ChildComp
  },
  data() {
    return {
      childMsg: '자식 컴포넌트로부터 아직 메시지를 받지 못했어요!'
    }
  }
}
</script>

<template>
  <ChildComp @response="(msg) => childMsg = msg" />
  <p>{{ childMsg }}</p>
</template>

• 자식 컴포넌트

<script>
export default {
  emits: ['response'],
  created() {
    this.$emit('response', '자식 컴포넌트로부터 emit를 받았어요!')
  }
}
</script>

<template>
  <h2>자식 컴포넌트</h2>
</template>