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 './Child.vue' </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 'vue'
import Child from './Child.vue'
const msg = ref('Hello Juejin')
</script>先解释一下后面频繁出现的两个词 插槽和插槽内容，防止后面阅读搞混了：
同样的 插槽表示的就是这个msg变量。所以子组件 插槽是可以访问到父组件的数据作用域，而插槽内容是无法访问子组件的数据（即父组件中两个<child></child>之间是不能使用子组件中的数据的），这就是所谓的渲染作用域。后面会介绍插槽向插槽内容传参的方式
在父组件没有提供任何插槽内容的时候，我们是可以为子组件的插槽指定默认内容的，比如
//子组件 <template> <div> <slot>我是默认内容</slot> </div> </template> //父组件1 <template> <div> <child></child> </div> </template> <script> import Child from './Child.vue' </script> //父组件2 <template> <div> <child>Hello Juejin</child> </div> </template> <script> import Child from './Child.vue' </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 './Child.vue' </script>
所以父组件中无需在意顺序，只需要写好模板命好名，它就会自动去到它所对应的位置。
动态插槽名就是插槽名变成了变量的形式，我们可以随时修改这个变量从而展示不同的效果。它的写法是v-slot:[变量名]或者缩写为#[变量名]。
//父组件
<template>
<div>
<child>
<!-- 等同于#smallTurnip -->
<template>
小萝卜
</template>
<template>
中萝卜
</template>
<template>
大萝卜
</template>
</child>
</div>
</template>
<script>
import { ref } from 'vue'
import Child from './Child.vue'
const slotName = ref('smallTurnip')
</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 './Child.vue'
</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 './Child.vue'
</script>
//子组件Child.vue
<template>
<div>
<!-- 大萝卜 -->
<div>
<slot></slot>
</div>
</div>
</template>slot 및 Slot content에 대해 설명하겠습니다. code>를 사용하여 나중에 읽을 때 혼동을 방지하세요. 🎜🎜<img src="https://img.php.cn/upload/image/501/828/212/166125564295003%EC%8A%AC%EB%A1%AF%EC%9D%B4%EB%9E%80%20%EB%AC%B4%EC%97%87%EC%9E%85%EB%8B%88%EA%B9%8C?%20Vue3%EC%97%90%EC%84%9C%20%EC%8A%AC%EB%A1%AF%EC%9D%84%20%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94%20%EB%B0%A9%EB%B2%95%EC%97%90%20%EB%8C%80%ED%95%B4%20%EC%9D%B4%EC%95%BC%EA%B8%B0%ED%95%B4%20%EB%B3%B4%EA%B2%A0%EC%8A%B5%EB%8B%88%EB%8B%A4." 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 './Child.vue'
</script>
//子组件Child.vue
<template>
<div>
<!-- 大萝卜 -->
<div>
<slot></slot>
</div>
</div>
</template>
这类插槽便是具名作用域插槽啦
到这里插槽(slot)的全部用法基本就已经介绍完啦。如果感觉对你有用的话赶紧点赞收藏吧！
위 내용은 슬롯이란 무엇입니까? Vue3에서 슬롯을 사용하는 방법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
