전역등록

KHW·2021년 9월 29일

vue

프레임워크

목록 보기

7/43

컴포넌트

이름이 있는 재사용 가능한 인스턴스
컴포넌트는 얼마든지 반복해서 재사용할수 있습니다

컴포넌트 등록

전역등록 : Vue.component를 사용

지역등록 : components옵션을 통해 사용

props를 통해 데이터를 받는다.

전역등록 예시 (중요)

전역등록 예시 1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
<div id="components-demo">
  <button-counter></button-counter>
</div>
</body>
<script>
  // Create a Vue application
  const app = Vue.createApp({})

  // Define a new global component called button-counter
  app.component('button-counter', {
    data() {
      return {
        count: 0
      }
    },
    template: `
    <button v-on:click="count++">
      You clicked me {{ count }} times.
    </button>`
  })

  app.mount('#components-demo')
</script>
</html>

최상위 컴포넌트 App은 없는 상태로
전역으로 'button-counter 컴포넌트를 구성하였고
mount가 되고 나서는 해당 mount된 부분의 'button-counter'가 있는지 확인하고 존재하면 해당 내용을 template으로 처리한다
이를 통해 count가 하나씩 증가하게 만든다.

전역등록 예시 2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
<div id="components-demo">
  <button-counter :c="count" @en-count="count++"></button-counter>
</div>
</body>
<script>
  // Create a Vue application
  const App = {
    data() {
      return {
        count: 0
      }
    }
  }
  const app = Vue.createApp(App)

  // Define a new global component called button-counter
  app.component('button-counter', {
    template: `
      <button @click="$emit('enCount')">
        You clicked me {{ c }} times.
      </button>`
    ,
    props : ['c']
  })

  app.mount('#components-demo')
</script>
</html>

최상위 컴포넌트 App이 app에 등록된 상태로 app.component로 관련 내용을 만들고 이를 mount시키면 관련
태그의 :c는 app.component의 props의 'c'와 연결되고
props의 'c'는 template의 c와 연관되어 만들어진다.
부모 컴포넌트(App)는 자식 컴포넌트('button-counter') 인스턴스의 모든 이벤트를 수신하도록 선택 => $emit 사용

예시2 정리

최상위 컴포넌트 App 설정

button-counter라는 새로운 전역 컴포넌트 정의

해당 application을 mount한다.

관련 태그를 보니 button-counter 태그를 발견

:c가 app.component의 props의 'c'와 연결
app.component의 props의 'c'와 template의 c와 연결

@en-count는 template의 $emit에서 받아들여 최상위 컴포넌트 App이 해당 이벤트를 수신하도록 설정하여 클릭시 count가 증가하게 한다.

전역등록 예시3

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
<div id="components-demo">
  <button-counter :c="count" @en-count="toCount"></button-counter>
</div>
</body>
<script>
  // Create a Vue application
  const App = {
    data() {
      return {
        count: 0
      }
    },
    methods : {
      toCount(){
        this.count++;
      }
    }
  }
  const app = Vue.createApp(App)

  // Define a new global component called button-counter
  app.component('button-counter', {
    template: `
      <button @click="$emit('enCount')">
        You clicked me {{ c }} times.
      </button>`
    ,
    props : ['c']
  })

  app.mount('#components-demo')
</script>
</html>

전역등록 예시4

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
<div id="components-demo">
  <button-counter :c="count" @to-count="toCount"></button-counter>
</div>
</body>
<script>
  // Create a Vue application
  const App = {
    data() {
      return {
        count: 0
      }
    },
    methods : {
      toCount(count){
        this.count++;
      }
    }
  }
  const app = Vue.createApp(App)

  // Define a new global component called button-counter
  app.component('button-counter', {
    template: `
      <button @click="capitalize">
        You clicked me {{ c }} times.
      </button>`
    ,
    props : ['c'],
    methods: {
      capitalize(){
        this.$emit('toCount',this.c)
      }
    }
  })

  app.mount('#components-demo')
</script>
</html>