[Vue3] vue slot

공부는 끝이 없고, 오늘도 소스를 보다가 항상 그냥 대충 감으로 지나친 slot에 대한 정리를 한다.

 

---

Vue slot

- 부모 컴포넌트에서 자식 컴포넌트의 엘리먼트를 지정할 때 사용.

- 부모 : 자식 컴포넌트 가져다 씀. ( 자식 vue import 해서 태그로 사용)

- 자식이 slot 태그로 선언

- 부모가 태그속성에 slot 사용

 

* 자식 컴포넌트

<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>
      <template v-slot:child="slotProps">
        <button @click="slotProps.close">닫기</button>
        <!-- { hello: 'hello' } -->
        {{ slotProps }}
      </template>
      <template v-slot:body>
        <p>바디입니다.</p>
      </template>
    </BaseModal>
  </div>
</template>


<script>
import BaseModal from "./BaseModal.vue";
export default {
  name: "ParentModal",
  components: {
    BaseModal,
  },
};
</script>

 

*결과

 

Codesandbox URL

https://codesandbox.io/s/admiring-johnson-8ljjul?file=/src/components/ParentModal.vue 

admiring-johnson-8ljjul - CodeSandbox