[Vuejs] Component & Event

Component

• vue의 강력한 기능!
• HTML Element를 확장하여 재사용 가능한 코드를 캡슐화한다.
• Vue Instance 이기도 하기 때문에 모든 옵션 객체를 사용한다.
• Life Cycle Hook 사용 가능하다.
• 전역, 지역 둘 다로 사용가능

기능별 component로 나눌 수 있다.

 

- 전역 컴포넌트

<div id="app1">
	<my-global></my-global>	<!-- 여기는 무조건 케밥 표기법 !!! -->
</div>

<script>
  Vue.component('MyGlobal', {	// 이름은 'my-global' 이렇게 케밥 표기법이 더 권장된다.
      template: '<h2>전역 컴포넌트</h2>',
  });
</script>

 

- 지역 컴포넌트

    <div id="app1">
      <my-local></my-local>
    </div>
    <script>
      new Vue({
        el: '#app1',
        components: {
          'my-local': {
            template: '<h2>지역 컴포넌트</h2>',
          },
        },
      });
      new Vue({ // 여기서는 위의 component를 사용할 수 없다.(지역 컴포넌트니까!)
        el: '#app2', 
      });
    </script>

 

- component template

    <div id="app">
      <my-comp></my-comp>
    </div>
    <template id="MyComp">
      <div>
        <h2>{{msg}}</h2>
      </div>
    </template>
    <script>
      Vue.component('MyComp', {
        template: '#MyComp',
        data() {
          return {
            msg: 'hello component',
          };
        },
      });
      
      new Vue({
        el: '#app',
      });
    </script>

---

- 컴포넌트간 통신

• 부모(상위)는 자식(하위)에게 props를 전달하고, 자식은 부모에게 event만 전달한다.
• 자식은 부모의 값을 직접 참조할 수 없다.
• data와 마찬가지로 props 속성의 값을 template에서 사용가능하다.

---

- 사용자 정의 이벤트

• 이벤트는 대소문자 변환 안 되니 정확한 이벤트 이름을 작성할 것. 케밥 표기법 권장!

 

 

• 자식이 부모에게 $emit 하여 이벤트 발생시키면, 부모는 자식이 발생시킨 이벤트를 수신(on) 하여 처리한다.

    <div id="app">
      <h4>당신이 좋아하는 파트를 선택하세요</h4>
      <h2>총 투표수 : {{ total }}</h2>

      <!-- root component(app) 의 자식 subject 두 개 -->
      <subject v-on:addtotcount="addTotalCount" title="코딩"></subject>     <!-- addTotalCount = 부모의 함수-->
      <subject v-on:addtotcount="addTotalCount" title="알고리즘"></subject> <!-- v-on: 뒤에 나오는 addtotcount = 나(자식)의 함수-->
    </div>                                  <!-- title은 부모의 것....? 왜? -->
    <script>
      Vue.component('Subject', {
        template: '<button v-on:click="addCount">{{ title }} - {{ count }}</button>',
        props: ['title'],
        data: function () {
          return {
            count: 0,
          };
        },
        methods: {
          addCount: function () {
            this.count += 1;
            // 부모 v-on:이름 에 해당하는 이름의 이벤트를 호출
            this.$emit('addtotcount');  // 자식이 부모한테 뭔가 전달할 때는 이벤트 활용한다. emit()
          },
        },
      });

      new Vue({
        el: '#app',
        data: {
          total: 0,
        },
        methods: {
          addTotalCount: function () {  // root component에 addTotalCount 라는 함수가 존재
            this.total += 1;
          },
        },
      });
    </script>

 

 

• 하위에서 상위로 data 를 전달하고 싶을 땐 공식적으로는 없지만 event bus를 이용하여 이벤트 인자로 data 전달할 수 있다.

 

 

비 상하위간 통신 ( 상위 거치지 않고 하위 컴포넌트끼리 통신) 예제

    <div id="app">
      <my-count></my-count>
      <log></log>
    </div>
    <template id="myCount">
      <div>
        <input type="text" v-model.number="count" @keyup.enter="send" />
        <button @click="send">보내기</button>
      </div>
    </template>
    <template id="log">
      <div>
        <h2>{{count}}</h2>
        <ul>
          <li v-for="msg in list">{{msg}}</li>
        </ul>
      </div>
    </template>
    <script>
      const bus = new Vue();  // 비어있는 컴포넌트를 하나 만든다.
      Vue.component('my-count', {
        template: '#myCount',
        data() {
          return {
            count: 0,
          };
        },
        methods: {
          send() {
            bus.$emit('updateLog', this.count); // updataLog를 호출하면서 자신의 count 프로퍼티를 넘겨줬음
            this.count = '';
          },
        },
      });

      Vue.component('Log', {
        template: '#log',
        data() {
          return {
            count: 0,
            list: [],
          };
        },
        methods: {
          updateLog(data) {     // bus.on 으로 this.updateLog가 실행되면서 받은 this.count 가 data자리로 넘어간다.
            this.count += data;
            this.list.push(`${data}을 받았습니다.`);
          },
        },
        created: function () {
          bus.$on('updateLog', this.updateLog); //updateLog 라는 값이 들어오면 this(나자신컴포넌트)의 updateLog 라는 함수가 호출되어야한다.
                                                // my-count 라는 component가 전달해준 this.count를 data로 넘겨준다...?
        },
      });

      new Vue({
        el: '#app',
      });
    </script>