[vue] v-slot

컴포넌트의 디자인을 바로 아래에 있는 컴퍼넌트에 전달해 재활용할 수 있는 기능이다.

---

부모 컴퍼넌트에 v-slot (#title) 로 정의 후

<template>
  <About ref="about">
    <template #title>
      <div>
        <h1>제목입니다</h1>
      </div>
    </template>
  </About>
</template>

export default {
  name: 'Home',
  components: {
    About
  },
}

자식 컴퍼넌트에 <slot name="title"></slot>를 이용해여 재활용한다

<slot name="title"></slot>

 

about 이라는 자식컴퍼넌트에선 <template #title></template> 로 감싸진 화면을

손쉽게 재활용 가능

---

동적으로 slot 할당하기

 

 

slotNum 데이터를 이용해 slot id를 동적으로 부여했다.

버튼을 클릭할때마다 slot id가 1,2를 왕복하며 움직인다.

 

//부모 컴퍼넌트

<template>
  <div id="app">
    <HelloWorld :msg="msg" >
      <template v-slot:[slotNum]>
        {{slotNum}}
      </template>
    </HelloWorld>
    <button @click="slotNum = slotNum===1 ? 2 : 1"></button>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      slotNum:1,
      msg:"Welcome to Your Vue.js App"
    }
  },
}
</script>

 

//자식컴퍼넌트

<template>
  <div class="hello">
    <slot name="1">1번쨰 슬롯</slot>
    <p>슬롯바깥</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

 

slotNum이 1일때에는

"슬롯바깥"이 출력되고

slotNum이 2일때에는  "1번째 슬롯"과 "슬롯바깥"이 출력된다.

 

동적으로 슬롯이 연결됨을 확인했음

---

slot으로 emit과 같은 효과를 받아올 수 있다.

 

v-slot을 이용해 같은 화면을 여러 번 뿌려주나,

데이터는 각각 다르게 바인딩 시키고 싶을 수 있음.

 

그럴때는 자식컴퍼넌트에서

props를 보내듯이 아래예시처럼 작성함

 

//자식 컴퍼넌트

<template>

    <slot name="name" :text="'text입니다'" :number="5"></slot>
    <slot name="name2" :text="'text2입니다'" :number="56"></slot>

</template>

 

그 후, 부모 컴퍼넌트에서는 자유로운 이름으로 데이터를 객체형태로 받아올 수 있고

(아래 예시에서는 "slotEmits")

원하는곳에 데이터바인딩을 통해 표현함

 

 

//부모 컴퍼넌트

<HelloWorld>
    <template #name="slotEmits">
      {{slotEmits.text}}
      {{slotEmits.number}}
    </template>
</HelloWorld>

---

slotEmits를 받아올 때는 아래와 같은 문법으로도 사용가능함

 

//부모 컴퍼넌트

---

slot 자식컴퍼넌트에서 각각의 고유한 데이터를 받아와 뿌려주는 기법은

v-for을 이용할 때 사용할 수 있을듯 해서 예시코드를 작성 해봄

 

//부모 컴퍼넌트

 

//자식 컴퍼넌트