Vue의 v-tooltip 원리에 대한 질문입니다!

Question

코드는 이러합니다. 여기서 궁금한 것은 props 에 대한 내용입니다.props는 v-tooltip의 text="Tooltip"을 자식에게 넘겨받는 변수이며, props에는 text의 값이 담겨 있다고 이해 했습니다.그런데 왜 v-slot:activator로 버튼을 넘겨주는지 이해가 안됩니다!!그리고 v-bind에 왜 props를 담는지 이해가 안됩니다. 결국은 이 두 요소가 tooltip을 띄우는 거란건 변함없는 사실 이겠지요하지만 왜 그런 구조를 따라 가야하는건지 이해가 안 되네요... 코드를 볼 수 있으면 좀 이해가 되련지... 저 부분이 도통 이해가 안되네요!

kenu,전독시 · Answer

https://github.com/Akryum/vue-tooltip오픈 소스입니다.

kenu,전독시 · Answer

https://sourcegraph.com/search?q=context%3Aglobal+%3Ctemplate+v-slot%3Aactivator%3D%22%7B+props+%7D%22%3E&patternType=standard&sm=1&groupBy=repo여기있는 코드 참고가 될런지요.

MungGaeDev · Answer

https://m.blog.naver.com/tkddlf4209/221732083022관련 글입니다.간략하게 써보면1) 2.4++ 이후 버전부터 v-on은 오브젝트를 받을 수 있게 됩니다. (https://v2.vuejs.org/v2/api/#v-on)2) activator 라는 이름의 슬롯에 props로 정의된 값을 넘겨주게 됩니다.3) props에는 해당 동작을 수행하는 값입니다. 맨위 블로그에 코드중 { mousedown: showDialog} 이런식으로 말입니다.

애증의개발 · Answer

질문이 모호하게 보이는데요. -그런데 왜 v-slot:activator로 버튼을 넘겨주는지 이해가 안됩니다!!=> 왜 default 슬롯을 안쓰고 activator 슬롯을 쓰냐는 질문인지, 왜 슬롯을 써야하는것에 대한 질문인지 모르겠습니다. 왜 슬롯을 써야하냐는 질문으로 접근해보면, 슬롯을 사용함으로써 원하는 컴포넌트에 자유롭게 툴팁을 사용할 수 있게 하기 위함이예요. 슬롯을 사용하지 않으면 툴팁을 넣고싶은 요소마다 VButtonWithTooltip, VChipWithTooltip과 같이 하나하나 만들어야 될 수 있어요. 물론 props를 사용하는 방법도 있겠지만, 이렇게 되면 if문을 장황하게 사용해야겠죠.-그리고 v-bind에 왜 props를 담는지 이해가 안됩니다=> 컴포넌트 자체에서 모든 요소를 갖고 있다면 scoped slot을 사용해서 props를 넘겨줄 필요가 없습니다. 내부에서 처리하면 되니까요. 하지만 slot을 사용하면, 주입된 요소에 tooltip 고유 번호와 같은 정보들(코드를 까보기 귀찮아서 아는것만 쓸께요)을 넘겨줄 필요가 있게 되요. 왜냐하면, tooltip은 버튼 요소와 같은 레벨에 생성되지 않고 body > .v-overlay-container 내부에 여러개의 툴팁이 생성되게 됩니다.따라서 어떤 툴팁이 어떤 요소에 바인딩 되는지 정보가 필요하게 되니까 툴팁 컴포넌트에서 scoped slot으로 props를 넘겨줘야 하는거죠.

Vue의 v-tooltip 원리에 대한 질문입니다!

4개의 답변

Q&A 목록