vue.js 잘 아시는분.. 커스텀 팝업 관련

Question

제가 Vue로 진행중인 프로젝트가 있습니다.내용이 이해가 잘 안되신다고하셔서 수정하겠습니다.A와 B 컴포넌트가 있습니다.A컴포넌트에서 B 컴포넌트의 일부 코드를 바꾼 후 (이 과정에서 slot을 활용하고자 했습니다.)버튼을 클릭시 이 수정된 B 컴포넌트가 새 창에서 렌더링 되게 하고 싶습니다.

애증의개발 · Accepted Answer

혹시 런타임에 동적으로 모달창을 생성하고 싶으신거라면 $createElement API를 참조 해보시면 어떨까요?

asdfjljf · Answer

무슨말인지모르겠으나 가장좋은건창안띄우고 A에서 최대한바꾸고 단거에 띄우는게 최고같은데..

daywalker · Answer

vue component에 대해서 공부를 하셨다면 기본적으로 parent - child 관계입니다.parent -> child 로는 props 라는 속성값을 전달하고child -> parent 로는 $emit 이라는 이벤트를 호출하여 사용하게 됩니다.그런데 지금 말씀하신 기능은 component A 와 B가 parent - child 관계가 아니라 특정 view page에 같이 있는 구조로 보이네요.뭐 이런식이겠죠?그렇다면 parent - child 구조가 아닌 컴포넌트 끼리의 이벤트 처리를 어떻게 하는지 찾아보셔야겠네요.Event Bus 라는 개념이 있구요.Vuex 라는 개념도 있습니다.아니면 A, B 를 가지고 있는 view page 에서 처리를 해도 되겠죠.

CodeChobo · Answer

A에서 B에 대한 이벤트를 처리하는게 아니라, A에서 작성한 코드를 담은채로 B를 렌더링하고 싶은겁니다..Vuex나 이벤트 버스를 활용하는거랑은 다른 개념이라고 생각합니다만.. 제가 잘못 생각하고 있는지도 모르겠지만요.맨 처음 댓글 달아주신분 말씀대로 A에서 최대한 B에대한 코드를 작성하고 이를 기반으로 B를 띄우면 최고인데 이 방법을 모르겠습니다.

현자타임 · Answer

도와드리고 싶은데 무슨 말인지 모르겠어요 ㅠㅠ.

daywalker · Answer

A에 작성한 코드라는게 A에 있는 props 나 data나 methods 같은걸을 쓰고 싶은신건가요?그럼 extends나 mixins 기능을 찾아보셔야 겠네요.

asdfjljf · Answer

CodeChobo 작성한 코드를 담은채로가무슨말인지잘모르겠네요props는 당연히아실테고 객체형태로 던진다음에 받은곳에서 뿌려주면되지않나요

CodeChobo · Answer

props나 data나 methods를 말하는게 아닌 slot에 담긴 코드를 말하고 있습니다. 정확히는 template라고 보시는게 좋을 것 같습니다. div, a, select 등등이 담겨있는 template 코드들이요

asdfjljf · Answer

예를들면 이걸 그대로 담아서던지고싶다고하면이거 형태만 유지된채로 string에담아서 던지고그걸 받아서 일단 넘기는것부터가..이건 부모자식으로 처리할수있잖아요

daywalker · Answer

slot 부분을 component로 만들어서 A에서도 쓰고 B에서도 쓰는 방법이 있겠네요.

asdfjljf · Answer

CodeChobo 그런형식의 컴포넌트를 만든다음에 소환하면되잖아요예를들면 서치박스다 템플릿만들고 import한담에 이런식으로가져다쓰면되잖아요

asdfjljf · Answer

daywalker 제가말한게 이거랑같네요

CodeChobo · Answer

그렇게 컴포넌트를 여러개 만들면 그 시점에서 커스텀이 아니지 않나요..

yeori · Answer

팝업 컴포넌트에서 아래와같이 렌더링할 컴포넌트를 주입받는 식으로 하시려는거같긴한데 질문이 모호해서 의도는 잘 모르겠네요- 내가 해결하려는 문제- 내가 시도중인 방법 또는 접근 방식...을 명확히 분리해서 질문해야 하는데 읽는 사람은 잘 모르죠

CodeChobo · Answer

createelement는 한번 참고해보겠습니다! 잘하면 될것도 같네요!!

vue.js 잘 아시는분.. 커스텀 팝업 관련

15개의 답변

Q&A 목록