Vue문법(3) - 컴포넌트

컴포넌트 기초

scripts에서 components를 통해 불러옵니다.

 

MyBtn의 script에서 props 속성을 기본 설정한 후,

App.vue에서 수정할 수 있습니다.

 

props를 통해 App.vue(부모)와 MyBtn.vue(자식)간 데이터를 통신할 수 있습니다.

 

slot태그는 문자열만 들어가는 게 아니고 다른 태그도 들어 갑니다.

 

컴포넌트 속성 상속

App.vue에 MyBtn를 import한 후, 클래스를 추가하면,

해당 클래스가 MyBtn에도 나타납니다.

만약에 MyBtn에 내용이 여러개가 있으면, 해당 클래스는 추가되지 않습니다.

상속 옵션을 false를 지정하면 상속하지 않겠다고 선언한 겁니다.

개별 속성을 상속받고 싶으면 태그 안에 v-bind로 개별 지정하면 됩니다.

모든 속성을 다 상속받고 싶으면 v-bind="$attrs"로 표시하면 됩니다.

이때 약어를 사용하면 안 됩니다.

 

컴포넌트 Emit

위에 속성 상속 규칙과 마찬가지 MyBtn에 최상요소가 2개이상 존재하면

이벤트를 연결할 수 없습니다.

특정한 이벤트를 상속하고 실행하려면 emits를 사용해야 됩니다.

 

컴포넌트 Slot

slot은 위에도 간략하게 언급했습니다.

App.vue의 내용을 우선 표시하되,

만약에 App.vue에서 별도 표시를 안 해주면

컴포넌트 slot의 Apple를 표시됩니다.

slot의 내용을 출력하는 것을 fallback contents라고 불립니다.

v-slot를 통해 이름을 명시해줄 수 있습니다.

이거는 이름을 받는 슬릇(named slot)라고 불립니다.

 

v-bind: 의 약어는 :

v-on: 의 약어는 @

v-slot: 의 약어는 #

입니다.

약어를 사용해서 좀 더 간략하게 작성할 수 있습니다.

 

컴포넌트 Provide, Inject

App.vue에 두 컴포넌트가 있다고 가정해봅시다.

parent와 child입니다.

child의 msg가 parent를 거쳐 app로 전달됩니다.

여기서 parent는 msg를 변동해주지 않습니다.

이럴때는 provide와 inject를 통해 parent 컴포넌트를 건너뛸 수 있습니다.

app에서 provide를 통해 msg 데이터를 만듭니다.

child에서 inject를 사용합니다.

 

provide는 반응형을 제공할 수 없습니다!

 

반응형을 제공하기 위해 기타 작업이 필요합니다.

script에 computed패키지를 import한 후, 반응형을 가져옵니다.

computed는 객체 데이터를 출력하니, child에서 msg.value를 출력해야 원하는 결과가 나옵니다.

 

컴포넌트 Refs

특정한 요소나 컴포넌트를 참조할 수 있습니다.

특정한 요소를 보통 id나 class를 부여해서 좀 더 빨리 찾을 수 있습니다.

vue.js에서는 ref를 사용해서 같은 기능을 실현할 수 있습니다.

 

주의할 점은 created()에서는 동작 안 합니다.