VueVue3

Vue3 - Component

목차

Component

Component 란 하나의 화면을 여러개의 블록으로 나눌 수 있는 단위입니다. Component 를 통해 빠르게 화면을 구조화할 수 있고 코드 재사용성이 늘어납니다. Vue 에서는 Component 를 이용한 개발을 지원합니다.

한 페이지에서 하위 컴포넌트 생성

components 내 template 을 이용하면 상위 컴포넌트에서 바로 하위 컴포넌트 내용을 정의할 수 있습니다. 

Vue.createApp({
  components: {
    // '컴포넌트 이름': 컴포넌트 내용
    'app-header': {
      template: '<h1>컴포넌트 이름</h1>'
    }
  }
}).mount('#app')

정의된 하위 컴포넌트는 컴포넌트 이름을 통해 상위 컴포넌트에서 사용할 수 있습니다.

<div id="app">
  <app-header></app-header>
</div>

별도의 파일로 Component 생성

vue 파일을 이용해 하위 컴포넌트를 생성할 수 있습니다.

<template>
  <h1>{{ appTitle }}</h1>
  <button @click="changeTitle">변경</button>
</template>

<script>
  export default {
    props: ['appTitle'],
    methods: {
      changeTitle() {
        this.$emit('change');
      }
    }
  }
</script>

<style scoped>

</style>

상위 Component 에서 하위 Component 를 사용하기 위해서는 import 를 이용해 하위 vue 파일에 정의된 Component 를 가져와 components 에 등록해야합니다. 

// import 컴포넌트이름 from './컴포넌트 경로'
import AppHeader from "./components/AppHeader.vue";

export default {
  // 하위 컴포넌트 등록
  components: {
    AppHeader,
  },
  data() {
    return {
      message: "앱 헤더 컴포넌트",
    };
  },
  methods: {
    changeMessage() {
      this.message = "변경됨";
    },
  },
};

위와 마찬가지로 상위 컴포넌트에서는 등록된 컴포넌트 이름을 이용해 사용할 수 있습니다.

<template>
  <AppHeader v-bind:appTitle="message" v-on:change="changeMessage"> </AppHeader>
</template>
Share