Vue.js - 컴포넌트 데이터 전달

Vue.js 를 사용하여 자식 컴포넌트 또는 부모 컴포넌트에 props를 사용 하여 데이터를 전달 할수있다.

- 부모 컴포넌트 -> 자식 컴포넌트 데이터 전달 예제

• 컴포넌트 생성
  • inputField.vue

  • 

  • inputField 내부 소스

    • 

    • 

    • Home.vue

      • 

- 자식 컴포넌트 -> 부모 컴포넌트 전달 예제 -

• methods object를 사용한 함수 사용 방법
• Home.vue 
  • 생성한 컴포넌트를 기반으로 html 요소 생성

    

    :name -> 전달 할 데이터, @update-Name = "updateName" -> 자식 컴포넌트에서 생성한 $emit 이벤트 명칭, 실행될 메서드 함수

    • method -> updateName () 함수 생성

      • 

        매개변수로 이벤트를 전달 받아 name 객체 업데이팅

  • inputField.vue

    • 

    • 입력 받을 요소인 input 요소 생성 후 :value = "name" Home.vue에서 전달한 props 데이터 전달
    • @input 이벤트로 updateName() 함수 실행
    • this.$emit() 요소로 Home.vue 파일에 전달할 이벤트 명칭 및 input 요소 이벤트 value 값 전달