'슬롯 액티베이터'는 시각화에서 어떻게 작동하는가?

'슬롯 액티베이터'는 시각화에서 어떻게 작동하는가?

나는 미리 정의된 템플릿 'Google 연락처'를 사용하고 있다.

링크: https://vuetifyjs.com/en/examples/layouts/googleContacts

나는 Vuetify에 처음 들어왔고 코드를 이해하는 데 어려움을 겪고 있다.하나는 '슬롯 액티베이터'이다.

샘플 코드:

    <v-list-tile slot="activator">
        <v-list-tile-content>
            <v-list-tile-title>
                {{ item.text }}
            </v-list-tile-title>
        </v-list-tile-content>
    </v-list-tile>

'슬롯 액티베이터'가 어떻게 작동하는지 말해줄 사람?

Vue 구성 요소를 선언할 때 Vuetify가 아닌 Vue 기본 기능인 명명된 슬롯을 생성할 수 있다.

예를 들어, 우리가 만약app-layout다음 템플릿이 있는 구성 요소:

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

상위 마크업:

<app-layout>
  <h1 slot="header">Here might be a page title</h1>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <p slot="footer">Here's some contact info</p>
</app-layout>

렌더링된 결과는 다음과 같다.

<div class="container">
  <header>
    <h1>Here might be a page title</h1>
  </header>
  <main>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </main>
  <footer>
    <p>Here's some contact info</p>
  </footer>
</div>

주목하라<slot name="header"></slot>템플릿 선언 예에서(위의 첫 번째 코드 블록).누군가가 그 구성 요소를 사용할 때, 그녀는 선언할 수 있다.<h1 slot="header">Here might be a page title</h1>그리고 이 코드는<slot name="header"></slot>가 최종 낙찰에서 1위를 차지

여기 에 대한 데모가 있다.<slot>실행 중인 s:

Vue.component('mycomponent', {
  template: "#mycomponenttemplate"
})
new Vue({
  el: '#app'
});

<script src="https://unpkg.com/vue@2.5.13/dist/vue.min.js"></script>

<div id="app">
  <app-layout>
    <h1 slot="header">Here might be a page title</h1>

    <p>A paragraph for the main content.</p>
    <p>And another one.</p>

    <p slot="footer">Here's some contact info</p>
  </app-layout>
</div>

<template id="mycomponenttemplate">
    <div class="container">
      <header>
        <slot name="header"></slot>
      </header>
      <main>
        <slot></slot>
      </main>
      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>
</template>

당신의 코드

예를 보여 주는 경우:

<v-list-group
         ...
          >
            <v-list-tile slot="activator">
              ...
            </v-list-tile>

보시다시피 이 코드는v-list-tile에서activator 상위 구성 요소의 슬롯(v-list-group).

공식 문서를 보는 것. (incl)구본)의 경우, 다음 중 어느 것이든 언급이 없다.<v-list-group>이름이 지정된 슬롯이 있음activator.

그러나 의 SOURCE CODE를 보면 그 하나가 존재한다는 것을 금방 증명한다.

참조URL: https://stackoverflow.com/questions/49079936/how-does-slot-activator-work-in-vuetify