vue.js slot 혹은 vue router에 관해 다시 여쭤보겠습니다. (커스텀 팝업)

Question

A 컴포넌트는 팝업으로 띄울 컴포넌트이자 베이스 컴포넌트입니다. 단, 모달이 아닌 새 창을 여는겁니다.B 컴포넌트 및 C 컴포넌트는 각자 목적에 맞게 컴포넌트로서 동작하고 있습니다.B와 C 어느 컴포넌트에서 A 팝업을 띄우든지 A의 기본적인 기능은 공통으로 수행되어야합니다.하지만B 컴포넌트에서 팝업버튼을 누르면 추가로 B의 기능을 하는 A 컴포넌트가 띄워집니다.C 컴포넌트에서 팝업버튼을 누르면 추가로 C의 기능을 하는 A 컴포넌트가 띄워집니다. B랑 C는 서로 완전히 다른 컴포넌트입니다. 단, A라는 팝업을 띄우는 기능만큼은 똑같습니다.하지만 B에서 열었을 때와 C에서 열었을 때, 대부분의 기능은 똑같지만 아주 약간의 기능이 다르게 동작합니다.(한 80%의 기능이 똑같다고 보시면 되겠습니다.) 아까 한번 질문을 올렸었습니다만.. 일단 vue의 slot이 어떤 역할이나 목적을 하는지 아시는 분들이 답변해주시면 감사하겠습니다..최대한 커스텀하게 짜려고 slot을 활용하는건데 가능한 개발하는 컴포넌트 수를 적게 가져가고 싶습니다.그리고 A에서 미리 B용 코드, C용 코드 작성해놓고, if-else처리 하고 싶지도 않습니다. 앞으로 D, E, F 등등 점점 컴포넌트가 늘어날텐데, 그 때마다 또 추가 코드 작성하고 또 예외처리하고 이런 식으로 짜는건 개인적으로 선호하지 않습니다.80%의 기능이 똑같은데 B용 팝업 컴포넌트 따로 구현하고 C용 팝업 컴포넌트도 따로 구현.. 이런 식으로 짜는게 싫어서 고민하고 있습니다. 팝업을 띄우는거 자체는 router-link를 활용해서 띄우려고 했습니다만, router에서 컴포넌트를 담을 때 처음 상태로 존재하는 A 컴포넌트 파일이 아닌 slot이 반영된 A 컴포넌트를 라우팅하고 싶습니다. 모달로하면 slot으로 되게 쉽게 구현 가능한건데... 팝업으로 하려니 도저히 모르겠네요 ㅜㅜㅜ

긔발자 · Answer

slot의 기능 부터 말씀드리자면 컴포넌트 재사용성을 극대화하기 위해 사용하는겁니다. 작성자의 글 내용을 읽어보니 대충 그런 목적으로 사용하시려는거 맞는거같습니다. 하지만 사용법이 틀렸습니다.A컴포넌트에서 slot 안에 들어갈 내용을 미리 작성하는게 아니라 B,C에서 A slot에 들어갈 내용을 작성해주는 것입니다. vue 는 공식문서가 잘 정리되어있으니 천천히 읽어보시면 다 나와있는 내용입니다. 또 컴포넌트 재사용에 대해 고민이 많으신거같은데 mixin 이나 HOC 에 대해서도 찾아보시면 좋을거같네요

애증의개발 · Answer

뇌피셜로 작성하니까 틀릴수도 있어요. 뷰 아주 초보는 아니신거 같아서 자세히 쓰진 않을께요.제 생각엔 첫째로 모달로 쓰는게 낫다고 보는데 그게 안되는 상황이시라구 일단 볼께요. 둘째론 props와 v-html을 쓰는건데요. 라우터에서 A 컴포넌트가 props를 받을 수 있게 해주시고, B 같은 사용 컴포넌트에서 라우트링크 태그에다가 html코드로 작성한 props를 넘기세요.A에서는 이를 v-html로 바인딩 해주시면 될듯해요.

CodeChobo · Answer

긔발자 A에서 미리 작성한다고 한적 없는데요.. 제가 A에서 한건 슬롯 선언밖에 없습니다.제가 slot에 관해 아시는분 와달라해놓고 저 자신이 제대로 모르고 있겠나요..

CodeChobo · Answer

난쟁감사합니다. 저도 모달로 하면 여기에 글도 안올려도 될텐데.. 팝업으로 해야할 것 같아요..ㅋㅋprops와 v-html은 생각을 못했던 부분이네요 JSX처럼 사용하라는 얘기 같은데.. 한번 해보겠습니다.

vue.js slot 혹은 vue router에 관해 다시 여쭤보겠습니다. (커스텀 팝업)

4개의 답변

#v-slot 목록