Vuejs - 템플릿의 헤더 섹션을 부모로 이동

Vuejs - 템플릿의 헤더 섹션을 부모로 이동

두 부분으로 구성된 템플릿을 생성하려고 합니다.

1. 탭(슬롯) ->은, 슬롯을 사용할 수 있는 것은,
2. 내용(슬롯)

이 구성요소(탭)는 특정 소품을 기준으로 탭을 구성하는 구성요소(탭 상위)로 래핑됩니다.

전체적인 목표는 다음과 같은 것을 만드는 것입니다.https://getbootstrap.com/docs/4.0/components/navs/ #http://https://getbootstrap.com/docs/4.0/components/navs/

커스텀 탭이 있는 경우는 예외입니다.간단하게 하기 위해 탭 구성 요소 내에 탭과 관련된 모든 정보를 보관하고 싶다.

1 - 헤더는 컴포넌트 자체에 렌더링되지 않고 부모 ***에 푸시됩니다.

2 - 탭 컴포넌트가$ref부모에게 전달하고 부모에게 HTML 및 리스너를 렌더링합니다.

부모에게 정보를 전달하는 다른 방법 또는 데이터를 푸시하고 탭 슬롯에 컴포넌트와 관련된 모든 리스너와 js를 유지하는 방법

 //tab component
           <template>
           <div>
                <div class="tab" ref="tab">
                     <slot name="heading"> //-> Only available in setup context.slots if the default content is not used therefore resulted in using ref
                     //Default content
                          {{heading}}  //-> if I add content to the heading slot via different components, the JS/listeners associated to those components do not work. I assume because I'm only pushing the HTML
                     </slot>
                </div>
                <div class="content ">
                     <slot/>
                </div>

           <div>
      </template>

      <script>
      import {onMounted, ref} from '@nuxtjs/composition-api'

      setup(props, {parent}){
           const tab = ref()

           onMounted(()=>{
                let tab = {
                     data: tab.value //The entire ref
                     //data: tab.value.innerHTML => Works for passing the html but no listeners or js work
                }

                //parent has data.tabs = []   
                parent.data.tabs.push(tab)

           })


           return {
                tab
           }

      },
      props:{
           ....
      }
      </script>

   //tab parent component (part to render tab via data.tabs)
   <ul

  >
    <li
      v-for="(child, index) in data.tabs"

      class="s-tabs--li"

      v-bind:key="index"
      v-html="child.data"
    ></li>
  </ul>



//Used in action
<s-tabs>
  <s-tab heading="Home">
    <div>
      Home
    </div>
  </s-tab>
  <s-tab heading="Service" icon="flower" tag="music">
    <div>
      Service
    </div>
  </s-tab>
</s-tabs>

언급URL : https://stackoverflow.com/questions/65524421/vuejs-move-header-section-of-template-to-parent