component slot

Vue component를 만들 때 내부에 텍스트 들을 template에 반영하려면 어떻게 하는지 알아보자. 

 

새로운 뷰 컴포넌트가 my-comp라고 하자

<my-comp>

  Hello

</my-comp>

 

Vue.component('my-comp', {

  template: '<div> </div>'

}

와 같은 방식으로 작성하면 Hello가 반영되지 않는다. 반영하게 하려면 어떻게 해야할까?

 

template: '<div> <slot></slot> </div>' 으로 작성하면 된다. <slot></slot> 부분이 Hello로 바뀌는 것을 확인할 수 있다.

 

컴포넌트 내용으로 넣을 때 slot의 이름을 지정하는 것도 가능하다. 이러면 Vue의 template에서 원하는 위치에 해당 요소를 위치시킬 수 있다. 다음과 같다. input이 slot1으로 지정되어 실제 화면에서 뒤쪽으로 위치가 변경되었다.

 

 

 

html에서 Vue의 data에서 가져와 slot 내용으로 사용하고 싶다면 어떻게 할까? 

data () { return { msg: 'slot data!' } } 라고 정의되어 있는 상태에서 어떻게 작성하면 될까?

 

다음과 같이 작성하면 Vue의 데이터를 slot을 만들 때 사용할 수 있다. 다소 복잡하지만 이런 것이 있는 것을 알고있으면 좋을 것이다.