[ Vue ] 컴포넌트간 데이터 전달 , PROPS와 EMIT

 

컴포넌트 간에 데이터를 전달할 수 있는 컴포넌트 통신 방법

- 분리된 상태의 부모, 자식 컴포넌트 간 긴밀히 소통해야 할 때가 있는데, 이때 필요한 것이 컴포넌트 통신. 즉 props와 emit이다.

 

 

 

  props  

 

부모에서 자식으로 데이터를 전달하기 위해 사용

프롭스 속성은 상위 컴포넌트에서 하위 컴포넌트로 내려보내는 데이터 통신 

 

// 하위 컴포넌트의 내용
var childComponent = {
  props: ['프롭스 속성 명']
}


<!-- 상위 컴포넌트의 템플릿 -->
<div id="app">
  <child-component v-bind:프롭스 속성 명="상위 컴포넌트의 data 속성"></child-component>
</div>

** props 받을때 배열으로 넣는거 잊지말기 **

 

 

:: 사용예시

 <div id="app">
	<child-component v-bind:child="message"></child-component>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
      const childProps = {
        template: "<button> {{child}} </button>",
        props: ["child"],
      };
      new Vue({
        el: "#app",
        data: {
          message: "text",
        },
        components: {
          "child-component": childProps,
        },
      });
</script>

 

:: 결과

 

 

 

 

  emit   

emit은 자식이 부모에게 데이터를 전달하기 위해서 이벤트를 발생시키는 것

 

// 하위 컴포넌트의 내용
this.$emit('이벤트 명');

<!-- 상위 컴포넌트의 템플릿 -->
<div id="app">
  <child-component v-on:이벤트 명="상위 컴포넌트의 실행할 메서드 명 또는 연산"></child-component>
</div>

 

:: 사용예시

<div id="app">
      <parent-component v-on:update="parent"> </parent-component>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
      const parentEmit = {
        template: "<button v-on:click='sendEvent'>parent</button>",
        methods: {
          sendEvent: function () {
            this.$emit("update");
          },
        },
      };
      new Vue({
        el: "#app",
        components: {
          "parent-component": parentEmit,
        },
        methods: {
          parent: function () {
            console.log("this");
          },
        },
      });
</script>

:: 결과

위 버튼을 클릭하면 콘솔에 this찍힘

 

 

 

---

✓ 참고

joshua1988.github.io/vue-camp/

whwl.tistory.com/40