컴포넌트화 시키는 방법

안녕하십니까 ?

불규칙적이고 다양한 dom을 사용하는 contents를 컴포넌트화 시킬려면 어떻케 해야하는지 궁금합니다

이런 contents가 만개정도가 있다면 만개 page를 만들수 없는 여건입니다(아래내용 참조)

(아래내용에서 contents를 불러오는 event(viewContents) 와 dom 속성과 style을 변경하는 이벤트 동작 필수)

좋은 아이디어가 있을까요 ?

 

컴포넌트화 시킬 내용

<template>

<div class="xNode" id="lawcurtree"> <div class="curNode"> <img id="d0imgtree" class="inline-block" src="/image/tree/base.gif"> <span class="lawmark">법률</span> <div class="inline-block hover:text-blue-500" @click="viewContents('A0000000887Z1817620210518')">근로기준법 [시행 2021. 11. 19.] [법률 제18176호, 2021. 5. 18., 일부개정]</div> </div> <div id="b0imgtree" style="display: block;"> <div class="curNode"> <img id="c1imgtree" class="inline-block" src="/image/tree/minus.gif" @click="displayOnOff('b1imgtree', 'c1imgtree')"> <img id="d1imgtree" class="inline-block" src="/image/tree/folderopen.gif"> <span class="lawmark">시행령</span> <div class="inline-block hover:text-blue-500" @click="viewContents('A0000001009Z3213020211119')">근로기준법 시행령 [시행 2021. 11. 19.] [대통령령 제32130호, 2021. 11. 19., 일부개정]</div> </div> <div id="b1imgtree" style="display: block;"> <div class="curNode"> <img class="inline-block" src="/image/tree/line.gif"> <img id="c4imgtree" class="inline-block" src="/image/tree/minus.gif" @click="displayOnOff('b4imgtree', 'c4imgtree')"> <img id="d4imgtree" class="inline-block" src="/image/tree/folderopen.gif"> <span class="lawmark">시행규칙</span> <div class="inline-block hover:text-blue-500" @click="viewContents('A0000008520Z33520211119')">근로기준법 시행규칙 [시행 2021. 11. 19.] [고용노동부령 제335호, 2021. 11. 19., 일부개정]</div> </div> <div id="b4imgtree" style="display: block;"> <div class="curNode"> <img class="inline-block" src="/image/tree/line.gif"> <img class="inline-block" src="/image/tree/line.gif"> <img id="c1imgtree5" class="inline-block" src="/image/tree/plusbottom.gif" @click="displayOnOff('b1imgtree5', 'c1imgtree5')"> <img id="d1imgtree5" class="inline-block" src="/image/tree/folder02.gif"> <span>행정규칙 </span> </div> <div id="b1imgtree5" style="display: none;"> <div class="curNode"> <img class="inline-block" src="/image/tree/line.gif"> <img class="inline-block" src="/image/tree/line.gif"> <img class="inline-block" src="/image/tree/empty.gif"> <img class="inline-block" src="/image/tree/joinbottom.gif"> <span class="rulemark">훈령</span> <div class="inline-block hover:text-blue-500" @click="viewContents('B0000018446Z14220150227')">임금체불사업주 명단 공개 및 체불자료 제공 관련 업무 처리 규정 [시행 2015. 2. 27.] [훈령 제142호, 2015. 2. 27., 일부개정]</div> </div> </div> </div> <div class="curNode"> <img class="inline-block" src="/image/tree/line.gif"> <img id="c1imgtree4" class="inline-block" src="/image/tree/plusbottom.gif" @click="displayOnOff('b1imgtree4', 'c1imgtree4')"> <img id="d1imgtree4" class="inline-block" src="/image/tree/folder02.gif"> <span>행정규칙 </span> </div> <div id="b1imgtree4" style="display: none;"> <div class="curNode"> <img class="inline-block" src="/image/tree/line.gif"> <img class="inline-block" src="/image/tree/empty.gif"> <img class="inline-block" src="/image/tree/join.gif"> <span class="rulemark">예규</span> <div class="inline-block hover:text-blue-500" @click="viewContents('B0000023689Z4720120925')">통상임금 산정지침 [시행 2012. 9. 25.] [예규 제47호, 2012. 9. 25., 일부개정]</div> </div> <div class="curNode"> <img class="inline-block" src="/image/tree/line.gif"> <img class="inline-block" src="/image/tree/empty.gif"> <img class="inline-block" src="/image/tree/join.gif"> <span class="rulemark">고시</span> <div class="inline-block hover:text-blue-500" @click="viewContents('B0000018909Z2019-3620190731')">재량근로의 대상 업무 [시행 2019. 7. 31.] [고시 제2019-36호, 2019. 7. 31., 일부개정]</div> </div> <div class="curNode"> <img class="inline-block" src="/image/tree/line.gif"> <img class="inline-block" src="/image/tree/empty.gif"> <img class="inline-block" src="/image/tree/joinbottom.gif"> <span class="rulemark">고시</span> <div class="inline-block hover:text-blue-500" @click="viewContents('B0000024093Z2015-7720151014')">평균임금산정 특례 고시 [시행 2015. 10. 14.] [고시 제2015-77호, 2015. 10. 14., 일부개정]</div> </div> </div> </div> <div class="curNode"> <img id="c2imgtree" class="inline-block" src="/image/tree/minus.gif" @click="displayOnOff('b2imgtree', 'c2imgtree')"> <img id="d2imgtree" class="inline-block" src="/image/tree/folderopen.gif"> <span class="lawmark">시행령</span> <div class="inline-block hover:text-blue-500" @click="viewContents('A0000001695Z2246520101027')">근로감독관규정 [시행 2010. 10. 27.] [대통령령 제22465호, 2010. 10. 27., 전부개정]</div> </div> <div id="b2imgtree" style="display: block;"> <div class="curNode"> <img class="inline-block" src="/image/tree/line.gif"> <img class="inline-block" src="/image/tree/joinbottom.gif"> <img id="d3imgtree" class="inline-block" src="/image/tree/folder.gif"> <span class="lawmark">시행규칙</span> <div class="inline-block hover:text-blue-500" @click="viewContents('A0000006784Z15820160616')">근로감독관증 규칙 [시행 2016. 6. 16.] [고용노동부령 제158호, 2016. 6. 16., 타법개정]</div> </div> </div> <div class="curNode"> <img id="c1imgtree3" class="inline-block" src="/image/tree/plusbottom.gif" @click="displayOnOff('b1imgtree3', 'c1imgtree3')"> <img id="d1imgtree3" class="inline-block" src="/image/tree/folder02.gif"> <span>행정규칙 </span> </div> <div id="b1imgtree3" style="display: none;"> <div class="curNode"> <img class="inline-block" src="/image/tree/empty.gif"> <img class="inline-block" src="/image/tree/join.gif"> <span class="rulemark">훈령</span> <div class="inline-block hover:text-blue-500" @click="viewContents('B0000007826Z37420211025')">근로감독관집무규정 [시행 2021. 10. 25.] [훈령 제374호, 2021. 10. 25., 일부개정]</div> </div> <div class="curNode"> <img class="inline-block" src="/image/tree/empty.gif"> <img class="inline-block" src="/image/tree/join.gif"> <span class="rulemark">예규</span> <div class="inline-block hover:text-blue-500" @click="viewContents('B0000023822Z2015-10020151106')">퇴직의 효력발생시기 [시행 2015. 11. 6.] [예규 제2015-100호, 2015. 11. 6., 일부개정]</div> </div> <div class="curNode"> <img class="inline-block" src="/image/tree/empty.gif"> <img class="inline-block" src="/image/tree/join.gif"> <span class="rulemark">고시</span> <div class="inline-block hover:text-blue-500" @click="viewContents('B0000033277Z2021-2920210401')">특별연장근로 건강보호조치 [시행 2021. 4. 6.] [고시 제2021-29호, 2021. 4. 1., 제정]</div> </div> <div class="curNode"> <img class="inline-block" src="/image/tree/empty.gif"> <img class="inline-block" src="/image/tree/joinbottom.gif"> <span class="rulemark">고시</span> <div class="inline-block hover:text-blue-500" @click="viewContents('B0000024895Z2017-1320170113')">한국표준산업분류 [시행 2017. 7. 1.] [고시 제2017-13호, 2017. 1. 13., 전부개정]</div> </div> </div> </div> </template>.