Vue.js 기초 파트 9 | 슬롯

오늘은 Vue.js에서 slots에 대해 이야기해보겠습니다.

이것은 내 Vue.js 기본 시리즈의 9부입니다. 8부를 읽으려면 클릭하세요(스포일러! 8부는 방출에 관한 것입니다).

부모 구성 요소에는 데이터를 자식 구성 요소로 전달하는 다른 방법이 있습니다. 슬롯을 통해:

<script>
import ChildComp from './ChildComp.vue'

export default {
  components: {
    ChildComp
  },
  data() {
    return {
      msg: 'from parent'
    }
  }
}
</script>

<template>
  <ChildComp> {{msg}} </ChildComp>
</template>

저쪽{{msg}}은 슬롯입니다. 먼저 코드에 대해 한 줄씩 이야기하겠습니다. import ChildComp from './ChildComp.vue' 하위 구성 요소를 가져옵니다. 다음과 같이 구성 요소 옵션에 등록하십시오.

components: {
    ChildComp
  },

스크립트 태그의 마지막 부분은 data 문자열 유형의 데이터만 보유하는 msg: 'from parent' 입니다. 그 후 우리는<ChildComp> {{msg}} </ChildComp> . Vue에서 구성 요소를 사용할 때 다음과 같이만 사용했음을 기억하십시오<ChildComp />. 그러나 여기에서 우리는 그들 사이에 다음과 같이 무언가를 넣습니다. <ChildComp> {{msg}} </ChildComp> . 따라서 구성 요소 태그 사이에 들어가는 것은 무엇이든 슬롯입니다. 따라서 구문은 다음과 같습니다<ComponentName> I AM A SLOT :) </ComponentName>.

다음은 자식 구성 요소입니다.

<template>
  <slot />
</template>

슬롯을 사용하려면 <slot /> 태그를 사용하기만 하면 됩니다. 부모의 슬롯이 없는 경우에 대비하여 폴백을 원하면 다음과 같이 할 수 있습니다. <slot> I'am a fallback :) </slot> .

오늘 저는 부모 구성 요소에서 자식 구성 요소로 콘텐츠를 보내는 또 다른 방법인 Vue의 슬롯에 대해 이야기했습니다. 이렇게 해서 Vuetutorial를 완성했습니다.

다음에는 포트폴리오 웹사이트를 만들 예정입니다(1페이지만 가능)