[Vue] 끄적끄적

컴포넌트 유효범위로 인해 다른 컴포넌트의 값을 직접 접근하지 못한다. 

이렇게 다른 컴포넌트의 값을 참조하지 못하기 때문에 뷰에서 미리 정의해놓은 데이터 전달방식에 따라 일관된 구조로 애플리케이션을 작성하게 된다.

 

가장 기본적인 데이터 전달 방법 

- 상위(부모) - 하위(자식) 컴포넌트 간의 데이터 전달 방법.

- 이것은 트리 구조에서 부모 노드, 자식 노드처럼 컴포넌트 간의 관계가 부모, 자식으로 이루어진 컴포넌트를 의미한다.

 

상위에서 하위로는 props라는 특별한 속성을 전달한다.

그리고 하위에서 상위로는 기본적으로 이벤트만 전달한다. 

 

props의 속성

- props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할때 사용하는 속성이다.

props 속성을 사용하려면 아래와 같이 한다.

Vue.component('child-component', {

props:['props 속성 이름'],

});

 

그런 다음 상위 컴포넌트의 HTML 코드에 등록된 child-component 컴포넌트 태그에 v-bind 속성을 추가한다.

<child-component v-bind:props 속성 이름="상위 컴포넌트의 data 속성"></child-component>

v-bind 속성의 왼쪽 값으로 하위 컴포넌트에서 정의한 props 속성을 넣고, 오른쪽 값으로 하위 컴포넌트에 전달할 상위 컴포넌트의 data 속성을 지정한다.

 

컴포넌트 등록과 동시에 뷰 인스턴스 자체가 상위 컴포넌트가 된다.

 

뷰 인스턴스(상위 컴포넌트)

child-compoentnt(하위 컴포넌트)

 

 

하위에서 상위 컴포넌트로 데이터를 전달할 수 없다.

- 뷰의 단방향 데이터 흐름에 어긋나는 구현 방법이기 때문

- 향후 복잡한 뷰 애플리케이션을 구축할때 이벤트 버스를 이용하여 데이터를 전달해야 할 경우가 있다.

 

 

 

//이벤트 발생

this.$emit('이벤트명');

 

//이벤트 수신

<child-component v-on:이벤트명="상위 컴포넌트의 메서드명"></child-component>

 

궁금한 부분

- 이벤트 버스를 그럼 자주 쓰나?

- 단계가 깊어지면 복잡성(높아짐)

단계가 깊지 않고, 상위 -> 하위에만 데이터 전달. 그 외엔 이벤트 버스로

 

* slot

부모 컴포넌트에서 자식 컴포넌트의 엘리먼트를 지정할때 사용한다.

<template>
    <ChildComponent>
        <button slot="left">왼쪽 버튼</button>
    </ChildComponent>
</template><template>    <div>        <!--부모에서 정의한 '왼쪽 버튼'이 위치한다-->        <slot name="left"></slot>    </div></template>
 

 

* v-slot

slot + slot-scope로 무조건 template 태그로 감싸고 그 컴포넌트 안에서 v-slot사용.