컴포넌트!

<중요하다 이말이야>

뷰 컴포넌트

컴포넌트는 화면의 영역을 구분하여 개발할 수 있는 뷰 기능.
이 기반으로 화면 개발을 하면 코드의 재사용성 높아진다.

인스턴스를 생성하면 기본적으로 root 컴포넌트가 됨.

컴포넌트의 통신 방식

상위에서 하위로는 데이터를 내려줌 -> pros 속성
하위에서 상위로는 이벤트를 올려줌 -> 이벤트 발생

props 속성

props 속성은 상위 컴포넌트에서 하위 컴포넌트로 데이터를 내려줄 때 사용한다.

	new Vue({
        el: "#app",
        components: {
          "app-header": appHeader,
          "app-content": appContent,
        },
        data: {
          //  상위 컴포넌트의 데이터 속성
          message: "hi",
          num: 10,
        },
      });

위 코드는 상위 컴포넌트의 vue 코드다. data의 message, num 데이터를
하위 컴포넌트로 속한 appContent에 어떻게 보내줄 수 있을까?

예시로 appContent 컴포넌트를 예시로 사용해보자면,

	let appContent = {
        template: "<div>num : {{ propsdata }}</div>",
        props: ["propsdata"],
    };

상위에서 보내주는 data를 props 속성을 propsdata로 정의해서
appContent는 data를 받아올 수 있다.

상위 컴포넌트에 있는 data에는 message와 num의 데이터 속성이 있다.
만약 num의 데이터 속성을 가져오고 싶다면?

<app-content v-bind:propsdata="num"></app-content>

정의한 하위 컴포넌트를 태그로 만들어 데이터 바인드를 해서 가져올 수 있다.
propsdata는 상위 컴포넌트에서 하위 컴포넌트에 데이터를 내려주기 위해 정의한
props명이고,
num은 상위 컴포넌트의 특정 데이터 속성 중 하나다.