🎈 이 기사는 WP 전용입니다
htps //wp. 메 / pc9 HC-1 Y

전치

별로 보이지 않는 $slots 소개🌟

$slots는 Vue 공식입니다
render 함수에서 사용됩니다.

vm.$slots 의 액세스는, 그리기 함수 에 의한 컴퍼넌트를 쓸 때에 가장 편리합니다.
vm.$slots

다만 render 함수는 Nuxt로 하는 것은
상당히 어렵습니다 💥
그래서 render 함수를 사용하지 않는다.
실용적인 $slots의 사용 예를 소개합니다.

동시에 render 함수에 대해서는
무엇을하고 싶을 때 사용하는지,
그리고 NG 예를 소개합니다.

참고:
그리기 함수와 JSX
【Vue.js】컴퍼넌트의 template의 쓰는 방법 정리

$slots

vm.$slots
디폴트와 에러시 등으로
표시를 전환하고 싶을 때 편리합니다 ✨
보고 받는 것이 빠르다고 생각합니다 👀

<template>
  <span v-if="$slots.default">
    <slot />
  </span>
  <span v-if="$slots.error">
    <slot name="error" />
  </span>
</template>

index.vue

<template>
  <div class="page">
    <TextSlot>
      <template>
        {{ text }}
      </template>
      <template #error>
        {{ textError }}
      </template>
    </TextSlot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '通常テキスト',
      textError: 'エラー時のテキスト',
    }
  ,
}

슬롯을 여러 개 사용하는 경우
이름이 붙어있었습니다.
그냥 슬롯 상태에 따라
표시/숨기기를 v-if로
전환할 수 없었습니다 💡
그것이 $slots를 사용하면 할 수 있습니다 🍀

⬇️ 스코프 부착 슬롯 등은
　여기를 참조하세요 👀
【Nuxt.js】slot 문법편: 스코프 첨부 슬롯을 사용하자

묘사(render) 함수

앞두고도 썼지만,
Nuxt에서 이것을 사용하는 것은
상당히 어렵습니다 💥

할 수있는 일, NG 예제
소개합니다.

공식 코드를 Nuxt로 바꿉니다.
level이라는 props로
h1~h6 중 어느 것을 표시할 것인가…
코드는 이렇게 됩니다.
길고 슬롯이 중복됩니다.
이것을 생략할 수 있는 것이 render 함수입니다.

AnchoredHeading.vue

<template>
  <div class="ttl">
    <h1 v-if="level === 1">
      <slot></slot>
    </h1>
    <h2 v-else-if="level === 2">
      <slot></slot>
    </h2>
    <h3 v-else-if="level === 3">
      <slot></slot>
    </h3>
    <h4 v-else-if="level === 4">
      <slot></slot>
    </h4>
    <h5 v-else-if="level === 5">
      <slot></slot>
    </h5>
    <h6 v-else-if="level === 6">
      <slot></slot>
    </h6>
  </div>
</template>

<script>
export default {
  props: {
    level: {
      type: Number,
      required: true,
    },
  },
}
</script>

부모에서 level 지정
h4를 표시하고 싶기 때문에 4를 지정

index.vue

<template>
  <div class="page">
    <AnchoredHeading :level="4">levelを指定</AnchoredHeading>
  </div>
</template>

NG예①Vue 공식을 copipe

그리기 함수와 JSX
이 렌더 함수를 복사해도
Nuxt에서는 움직이지 않습니다.

AnchoredHeading.vue

<template>
  <div class="ttl">
  </div>
</template>

<script>
export default {
  props: {
    level: {
      type: Number,
      required: true,
    },
  },
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // タグ名
      this.$slots.default // 子の配列
    )
  },
}
</script>

NG예②

Nuxt render function for a string of HTML that contains Vue components
이쪽을 참고로 해 보겠습니다.
template이므로
h 태그 중첩에 슬롯은 들어갈 것 같고,
원래 움직이지 않습니다.

AnchoredHeading.vue

<template>
  <div class="ttl">
  </div>
</template>
<script>
export default {
  props: {
    level: {
      type: Number,
      required: true,
    },
  },
  render(h, context) {
    return h({ template: `h${this.level}, ${this.$slots.default}` })
  },
}
</script>

그럼 사용하기 위해서는 어떻게 할까,
지금 JSX
사용할 수 있을 것 같습니다.

요약

$ slots는 render 함수 내에서뿐만 아니라
사용할 수있어 편리합니다 🌟