Vue.js 공부 기록(11) - props, Emit, 부모 컴포넌트로 데이터 보내기

🔍부모로부터 props를 받는 자식 컴포넌트 작성

자주 사용하는 스타일을 별도 자식 컴포넌트 InputField.vue로 분류하였다.

🤍부모 컴포넌트 Home.vue

• InputField를 불러오고 자신의 data인 name을 name 속성으로 (:name) 바인딩하여 props로 내려줌.

🤍자식 컴포넌트 InputField.vue

• props로 name을 받아와서 input의 value 속성으로 바인딩. => 부모 컴포넌트로부터 props로 받아온 name 값은 input의 value 값으로 지정되지만, 사용자가 input box에 입력한 값은 props.name 값으로 지정되지 않음.
• 이를 해결하기 위해서 @input 속성을 사용할 수 있다.

🤍@input

• @input을 이용하며 input 태그에 입력되는 값을 event로 출력할 수 있게된다.

🔍부모 컴포넌트로 변경값 보내기 : $Emit

🤍메서드 활용하기

• input 박스에 입력한 값을 페이지에 그대로 표시해주기 위해 필요한 것은 input으로 입력받은 값을 name 값에 넣어주는 것임.
• 자식 컴포넌트에서 props.name값을 직접 변경 X, 자식 컴포넌트의 input에서 변경된 값을 부모 컴포넌트의 name 값으로 업데이트 필요. 이러한 경우 $Emit을 활용할 수 있다.

this.$emit('update-name',e.target.value);

 

• 부모 컴포넌트(Home.vue)에서 자식 컴포넌트(InputField.vue)를 호출하는 부분에 @메서드 이름으로 부모의 메서드와 바인딩시켜줌.
• 부모 컴포넌트에서 새로 생성한 updateName 메서드는 부모의 this.name 값을 updateName메서드로부터 받아오는 인자값 name으로 지정해주게 된다.

실행 결과!!