슬롯이란 무엇입니까? Vue3에서 슬롯을 사용하는 방법에 대해 이야기해 보겠습니다.

Vue Vue를 사용해본 사람이라면 누구나 어느 정도 사용해봤을 거라 생각하지만, 그 용도를 모두 알고 계시나요? 이 기사에서는 Vue3에서 슬롯의 모든 사용법을 설명하여 공백을 찾고 채우는 데 도움을 줍니다. (학습 영상 공유: vue 영상 튜토리얼)

슬롯이란?

간단히 말하면 상위 컴포넌트에 제공되는 하위 컴포넌트의 pit를 사용합니다. <slot></slot>는 상위 구성 요소가 이 구멍의 템플릿 코드를 채운 다음 하위 구성 요소 <slot></slot>를 채울 수 있음을 의미합니다. > 해당 내용으로 대체하겠습니다. 예를 들어 하위 구성 요소의 가장 간단한 슬롯 예坑位，用<slot></slot> 表示，父组件可以在这个坑位中填充任何模板代码然后子组件中<slot></slot>就会被替换成这些内容。比如一个最简单插槽例子

//父组件
<template>
  <div>
    <child>Hello Juejin</child>
  </div>
</template>
<script>
import Child from &#39;./Child.vue&#39;
</script>

//子组件Child
<template>
    <div>
        <p>1</p>
        <slot></slot>
        <p>2</p>
    </div>
</template>

子组件中的<slot></slot> 便是父组件放在子组件标签<child></child>之间的内容。当然这之间你可以传入任何代码片段，都会被放到<slot></slot>这个位置。

同样的你也可以在标签<child></child>之间放入变量，比如

//父组件
<template>
  <div>
    <child>{{ msg }}</child>
  </div>
</template>
<script>
import { ref } from &#39;vue&#39;
import Child from &#39;./Child.vue&#39;
const msg = ref(&#39;Hello Juejin&#39;)
</script>

先解释一下后面频繁出现的两个词 插槽和插槽内容，防止后面阅读搞混了：

同样的 插槽表示的就是这个msg变量。所以子组件 插槽是可以访问到父组件的数据作用域，而插槽内容是无法访问子组件的数据（即父组件中两个<child></child>之间是不能使用子组件中的数据的），这就是所谓的渲染作用域。后面会介绍插槽向插槽内容传参的方式

默认内容

在父组件没有提供任何插槽内容的时候，我们是可以为子组件的插槽指定默认内容的，比如

//子组件
<template>
    <div>
        <slot>我是默认内容</slot>
    </div>
</template>

//父组件1
<template>
  <div>
    <child></child>
  </div>
</template>
<script>
import Child from &#39;./Child.vue&#39;
</script>

//父组件2
<template>
  <div>
    <child>Hello Juejin</child>
  </div>
</template>
<script>
import Child from &#39;./Child.vue&#39;
</script>

此时父组件1展示默认内容

父组件2展示提供的内容

具名插槽

很多时候一个 插槽满足不了我们的需求，我们需要多个 插槽。于是就有了具名插槽，就是具有名字的 插槽。简单来说这个具名插槽的目的就是让一个萝卜一个坑，让它们呆在该呆的位置去。比如带 name 的插槽 <slot name="xx"></slot>被称为具名插槽。没有提供 name 的 <slot></slot> 会隐式地命名为“default”。在父组件中可以使用v-slot:xxx（可简写为#xxx） 指令的 <template></template> 元素将目标插槽的名字传下去匹配对应 插槽。比如

//子组件

<template>
    <div>
        <!-- 大萝卜 -->
        <div>
            <slot></slot>
        </div>
        <!-- 小萝卜 -->
        <div>
            <slot></slot>
        </div>
        <!-- 中萝卜 -->
        <div>
            <slot></slot>
        </div>
    </div>
</template>

//父组件

<template>
  <div>
    <child>
      <!-- #smallTurnip 为v-slot:smallTurnip缩写 -->
      <template>
        小萝卜
      </template>
      <template>
        中萝卜
      </template>
      <template>
        大萝卜
      </template>
    </child>
  </div>
</template>
<script>
import Child from &#39;./Child.vue&#39;
</script>

所以父组件中无需在意顺序，只需要写好模板命好名，它就会自动去到它所对应的位置。

动态插槽名

动态插槽名就是插槽名变成了变量的形式，我们可以随时修改这个变量从而展示不同的效果。它的写法是v-slot:[变量名]或者缩写为#[变量名]。

//父组件
<template>
  <div>
    <child>
      <!-- 等同于#smallTurnip -->
      <template>
        小萝卜
      </template>
      <template>
        中萝卜
      </template>
      <template>
        大萝卜
      </template>
    </child>
  </div>
</template>
<script>
import { ref } from &#39;vue&#39;
import Child from &#39;./Child.vue&#39;
const slotName = ref(&#39;smallTurnip&#39;)
</script>

作用域插槽

作用域插槽

上面说过插槽内容是无法访问子组件的数据的，但是如果我们想在插槽内容访问子组件的状态该怎么办呢？

其实插槽可以像对组件传递 props 那样，在slot标签绑定属性从而传递给父组件中的插槽内容。首先来看下默认插槽的传值方式

//子组件
<template>
    <div>
        <slot></slot>
    </div>
</template>

//父组件

<template>
  <div>
    <child>
      My name is {{ slotProps.personName }} and I am {{ slotProps.age }} years old this year
    </child>
  </div>
</template>
<script>
import Child from &#39;./Child.vue&#39;
</script>

你还可以以结构的形式获取slot

<template>
  <div>
    <child>
      My name is {{ personName }} and I am {{ age }} years old this year
    </child>
  </div>
</template>

<slot></slot>는 상위 구성 요소가 하위 구성 요소 태그 <child></child> 사이에 배치되는 위치입니다. 콘텐츠. 물론 이 기간 동안 모든 코드 조각을 전달할 수 있으며 <slot></slot> 위치에 배치됩니다.

🎜마찬가지로 <child></child> 태그 사이에 🎜

//父组件
<template>
  <div>
    <child>
      <template>
        {{ bigTurnipProps.message }}
      </template>
    </child>
  </div>
</template>
<script>
import Child from &#39;./Child.vue&#39;
</script>

//子组件Child.vue

<template>
    <div>
        <!-- 大萝卜 -->
        <div>
            <slot></slot>
        </div>
    </div>
</template>

🎜와 같은 변수를 넣을 수도 있습니다. 먼저 자주 나타나는 두 단어인 slot 및 Slot content에 대해 설명하겠습니다. code>를 사용하여 나중에 읽을 때 혼동을 방지하세요. 🎜🎜<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/225/752/945/1661255655974791.png" class="lazy" title="1661255642950034 .png" alt=" 슬롯이란 무엇입니까? Vue3에서 슬롯을 사용하는 방법에 대해 이야기해 보겠습니다.">🎜🎜동일한 <code>슬롯은 이 msg 변수를 나타냅니다. 따라서 하위 구성 요소 슬롯은 상위 구성 요소의 데이터 범위에 액세스할 수 있지만 슬롯 콘텐츠는 하위 구성 요소의 데이터에 액세스할 수 없습니다(즉, 두 <child></child>는 하위 구성 요소의 데이터를 사용할 수 없습니다. 이것이 소위 렌더링 범위입니다. 슬롯에서 슬롯 콘텐츠로 매개변수를 전달하는 방법은 나중에 소개될 예정입니다🎜

🎜기본 콘텐츠🎜🎜🎜는 상위 구성 요소에서 사용 가능 슬롯 콘텐츠를 제공할 때 🎜rrreee🎜와 같이 하위 구성 요소의 슬롯에 대한 기본 콘텐츠를 지정할 수 있습니다. 이때 상위 구성 요소 1 코드>기본 콘텐츠 표시🎜🎜🎜🎜상위 구성 요소 2는 제공된 콘텐츠를 표시합니다🎜🎜🎜

🎜이름이 지정된 슬롯🎜🎜🎜슬롯는 우리를 만족시킬 수 없습니다. 우리의 필요에 따라 여러 개의 <code>슬롯이 필요합니다. 따라서 이름이 있는 슬롯인 이름이 지정된 슬롯이 있습니다. 간단히 말해서, 이 이름이 지정된 슬롯의 목적은 당근을 가두어 있어야 할 곳에 머물게 하는 것입니다. 예를 들어, name이 있는 슬롯 <slot name="xx"></slot>를 명명된 슬롯이라고 합니다. 이름을 제공하지 않는 <slot></slot>은 암시적으로 "default"로 명명됩니다. 상위 구성 요소에서 v-slot:xxx(#xxx로 축약 가능) 지시문의 <template></template> 요소를 사용하여 다음을 수행할 수 있습니다. 대상 슬롯을 설정합니다. 해당 슬롯과 일치하도록 이름이 전달됩니다. 예를 들면🎜rrreee🎜 🎜 🎜그러므로 상위 컴포넌트의 순서에 대해 걱정할 필요가 없습니다. 템플릿을 작성하고 이름을 지정하기만 하면 자동으로 해당 위치로 이동됩니다. 🎜

🎜동적 슬롯 이름🎜🎜🎜동적 슬롯 이름은 변수 형식의 슬롯 이름으로 언제든지 이 변수를 수정하여 다양한 효과를 나타낼 수 있습니다. v-slot:[변수 이름]으로 쓰거나 #[변수 이름]으로 축약합니다. 🎜rrreee

🎜스코프 슬롯🎜🎜

🎜스코프 슬롯🎜

🎜위에서 언급한슬롯 콘텐츠 하위 구성요소의 데이터에 액세스할 수 없지만 슬롯 콘텐츠에서 하위 구성요소의 상태에 액세스하려면 어떻게 해야 합니까? 🎜🎜사실 slot은 props를 구성 요소에 전달하는 것과 같은 방식으로 slot 태그에 전달할 수 있습니다. 속성은 slot에 바인딩됩니다. code> 태그를 사용하여 상위 구성요소의 <code>슬롯 콘텐츠에 전달됩니다. 먼저 기본 슬롯의 값 전달 방식을 살펴보겠습니다🎜rrreee🎜슬롯에서 제공하는 데이터를 구조체🎜rrreee🎜🎜🎜 형태로 가져올 수도 있습니다

注意不能绑定name属性，因为你绑定了name它就成了具名插槽了。同样具名插槽中的name属性也不会传递给插槽内容。因为传递的参数只能在插槽内容中使用，所以这类能够接受参数的插槽就被称为了作用域插槽。

具名作用域插槽

下面再看下具名作用域插槽它的传参方式。它接收参数的方式是通过template标签的指令v-slot的值获取的，所以可以缩写成这样

//父组件
<template>
  <div>
    <child>
      <template>
        {{ bigTurnipProps.message }}
      </template>
    </child>
  </div>
</template>
<script>
import Child from &#39;./Child.vue&#39;
</script>

//子组件Child.vue

<template>
    <div>
        <!-- 大萝卜 -->
        <div>
            <slot></slot>
        </div>
    </div>
</template>

这类插槽便是具名作用域插槽啦

写在最后

到这里插槽(slot)的全部用法基本就已经介绍完啦。如果感觉对你有用的话赶紧点赞收藏吧！

（学习视频分享：web前端开发、编程基础视频）

위 내용은 슬롯이란 무엇입니까? Vue3에서 슬롯을 사용하는 방법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!