[Vue.js #2] - 프롭스 속성과 이벤트 발생 (props, event emit)

프롭스

• 상위 컴포넌트에서 하위 컴포넌트로 프롭스의 속성을 전달한다.
• 하위 컴포넌트에 아래와 같이 propsdata를 연결해준다.
•  
• var appContent={ template:'<div>{{ propsdata }}</div>', props:['propsdata'] }
• 프롭스 속성 만드는 법이때 '프롭스 속성 이름'은 위의 propsdata가 되고, '상위 컴포넌트의 데이터 이름'은 상위 중 할당하고 싶은 컴포넌트를 넣어준다.

•   <app-header v-bind: 프롭스 속성 이름 = "상위 컴포넌트의 데이터 이름"></app-header> 
  

• 상위 컴포넌트의 데이터를 수정하면 바로 하위 컴포넌트의 프롭스로 반영됨. [reactivity]

---

이벤트

• 하위 컴포넌트에서 상위 컴포넌트로 이벤트를 발생시킨다.
• 상위 컴포넌트에 아래와 같이 전달할 메소드 함수와 템플릿을 담은 컴포넌트를 만든다.

•   var appHeader={
        template:'<button v-on:click="passEvent">click me</button>', //click했을 때의 이벤트들이 기록됨.
        methods:{
            passEvent: function() { //api이자 기능.
                this.$emit('pass'); //pass라는 이벤트가 emit된다.
            }
        }
    }
  

• 이벤트 속성 만드는 법이때 '하위 컴포넌트에서 발생한 이벤트 이름'은 pass 이벤트가 emit되게끔 설정해야하며, '상위 컴포넌트의 메서드 이름'은 이벤트를 처리할 특정 함수로 넣어주면 된다.

•   <app-header v-on : 하위 컴포넌트에서 발생한 이벤트 이름 = "상위 컴포넌트의 메서드 이름"></app-header>
  

• this 해당 영역 상위의 객체를 가리킨다. 따라서 메소드나 속성 함수 안에서 해당 객체의 속성을 불러 사용할 수 있다.