Vue Slots

18606 ワード
vue テキストリンク
スロットとは?
一般的に、溝の意味は穴、細い穴です.本当に簡単な言い方は、スロットが別の方法で素子にコンテンツまたは他の素子を注入する方法である.この方法を使用すると、構成部品の再利用が容易になります.
使用方法
基本
<template>
  <!--부모 컴포넌트-->
  <ChildComponent>
    <button>버튼</button>
  </ChildComponent>
</template>
<!-- 자식 : ChildComponent -->
<template>
  <div>
    <!--부모에서 정의한 '버튼'이 위치합니다 -->
    <slot></slot>
  </div>
</template>
名前付きスロット
<template>
  <!--부모 컴포넌트-->
  <ChildComponent>
    <button slot="left">왼쪽 버튼</button>
    <button slot="right">오른쪽 버튼</button>
  </ChildComponent>
</template>
<!-- 자식 : ChildComponent -->
<template>
  <div>
    <!--부모에서 정의한 '왼쪽 버튼'이 위치합니다 -->
    <slot name="left"></slot>

    <!--부모에서 정의한 '오른쪽 버튼'이 위치합니다 -->
    <slot name="right"></slot>
  </div>
</template>
サブデータの親で使用されるslot-scope(関数と変数を使用)
<!-- 자식-->
<template>
  <div>
    <header>
      <slot name="child" :childData="childData" :close="close">
        <button>버튼</button>
      </slot>
    </header>
    <div>
      <slot name="body">
        <p>기본 바디</p>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "BaseModal",
  data() {
    return {
      childData: "child",
      active: false
    };
  },
  methods: {
    close() {
      this.active = false;
    }
  }
};
</script>
<!-- 부모 -->
<template>
  <div>
    <BaseModal>
      <!--자식에서 사용하던 name="child"로 감싸진 태그의 함수, 변수 모두 가져옵니다.-->
      <template slot="child" slot-scope="slotProps">
        <button @click="slotProps.close">닫기</button>
        <!-- { childData: 'child' } -->
        {{ slotProps }}
      </template>
      <p slot="body">바디입니다.</p>
    </BaseModal>
  </div>
</template>
v-slot
名前付きスロットと範囲付きスロットに新しい統合構文(「v-slot」コマンド)を導入しました.name-slot+slot-scopeと見なすことができます.
異なる点は、v-slotを使用する場合、テンプレートラベルでslotをパッケージし、コンポーネント内でv-slotを使用する必要があります.
また、slot、slot-scopeは、後で更新されるVUE 3で正式に削除されるので、VUEが正式にサポートしているv-slotしか使用できません.
上記の例では、v-slotに変換して以下に示す.
<template>
  <div>
    <BaseModal>
      <template v-slot:child="slotProps">
        <button @click="slotProps.close">닫기</button>
        <!-- { hello: 'hello' } -->
        {{ slotProps }}
      </template>
      <template v-slot:body>
        <p>바디입니다.</p>
      </template>
    </BaseModal>
  </div>
</template>
Refernece
https://kr.vuejs.org/v2/guide/components-slots.html#%EC%9D%B4%EB%A6%84%EC%9D%B4-%EC%9E%88%EB%8A%94-%EC%8A%AC%EB%A1%AF(Named-Slots )
https://webruden.tistory.com/923
https://kyounghwan01.github.io/blog/Vue/vue/slot/#%E1%84%80%E1%85%B5%E1%84%87%E1%85%A9%E1%86%AB
vueにおける一括コンポーネントのグローバルおよびローカル導入方法
Kotlinにおけるリストとmutablelistの違いの理解