11. 싱글 파일 컴포넌트

모든 예제 코드는 github에 있습니다.

11. 싱글 파일 컴포넌트

싱글 파일 컴포넌트에 배운 내용 적용하여 개발 시작하기

• template에는 root element 하나만 있어야 한다.(아래와 같이 하면 안된다.)

<template>
<div>
</div>
<div>
</div>
</template>

• 컴포넌트를 재사용해야 하기 때문에 다른 컴포넌트가 데이터를 공유하면 안되기 때문에 아래와 같은 문법으로 정의해야 함

<script>
export default {
  data: function() {
    return {

    }
  }
}
</script>

• helloWorld.vue

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      message: "hello World",
    };
  },
};
</script>

<style></style>

• App.vue

<template>
  <hello-world></hello-world>
</template>

<script>
import helloWorld from './components/helloWorld'
export default {
  components:{
    'hello-world':helloWorld
  }
}
</script>

<style>

</style>

• npm run serve로 실행해보기.

싱글 파일 컴포넌트 체계에서 컴포넌트 등록하기

• 컴포넌트 파일명은 파스칼 케이스, 두 단어 이상으로 하는 것이 좋다.
  • 한 단어로 하면, HTML 표준 태그와 충돌 날수 있기 때문이다.
• App.vue 에서 App Header를 사용
• AppHeader.vue

<template>
  <div>
      <h1>Header</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

<template>
  <div>
    <app-header></app-header>
    <hello-world></hello-world>
  </div>
</template>

<script>
import helloWorld from "./components/helloWorld";
import appHeader from "./components/AppHeader";
export default {
  components: {
    "hello-world": helloWorld,
    "app-header": appHeader,
  },
};
</script>

<style></style>

싱글 파일 컴포넌트에서 props 속성 사용하는 방법

v-bind:프롭스 속성 이름 = "상위 컴포넌트의 데이터 이름"

• App.vue

<template>
  <div>
    <app-header v-bind:header="header"></app-header>
    <hello-world></hello-world>
  </div>
</template>

<script>
import helloWorld from "./components/helloWorld";
import appHeader from "./components/AppHeader";
export default {
  data: function() {
    return {
      header: "Header",
    };
  },
  components: {
    "hello-world": helloWorld,
    "app-header": appHeader,
  },
};
</script>

<style></style>

<template>
  <div>
      <h1>{{header}}</h1>
  </div>
</template>

<script>
export default {
props:["header"]
}
</script>

<style>

</style>

싱글 파일 컴포넌트에서 event emit 구현하기

• emit으로 하위 컴포넌트에서 데이터를 올리면, 가장 먼저 받을 수 있는 곳이 태그이다.
• EventEmit.vue

<template>
  <button v-on:click="passEvent">click me!!!</button>
</template>

<script>
export default {
  methods: {
    passEvent: function() {
      this.$emit('pass');
    },
  },
};
</script>

<style></style>

• App.vue

<template>
  <div>
    <app-header v-bind:header="header"></app-header>
    <hello-world></hello-world>
    <div></div>
    <p>Event emit</p>
    <event-emit v-on:pass="addNumber"></event-emit>
    <p>{{ num }}</p>
  </div>
</template>

<script>
import helloWorld from "./components/helloWorld";
import appHeader from "./components/AppHeader";
import eventEmit from "./components/EventEmit";

export default {
  data: function() {
    return {
      header: "Header",
      num: 0,
    };
  },
  components: {
    "hello-world": helloWorld,
    "app-header": appHeader,
    "event-emit": eventEmit,
  },
  methods: {
    addNumber: function() {
      this.num++;
    },
  },
};
</script>

<style></style>