What is a slot? Let's talk about how to use slots in Vue3-Vue.js-php.cn

Home

Web Front-end

Vue.js

What is a slot? Let's talk about how to use slots in Vue3

青灯夜游

Aug 23, 2022 pm 07:57 PM

vuevue3slotslot

What is a slot? Let's talk about how to use slots in Vue3

Vue I believe that everyone who has used Vue has used the slots more or less, but do you know all its uses? This article will bring you all the usage of slots in Vue3 to help you find and fill gaps. (Learning video sharing: vue video tutorial)

What is a slot

Simply speaking, it is the provided in the sub-component A pit used by the parent component, represented by <slot></slot>. The parent component can fill in any template code in this pit and then ## in the child component #<slot></slot> will be replaced with these contents. For example, in the simplest slot example

//父组件
<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>

, the

<slot></slot> in the child component is the parent component placed between the child component tag the content of the space. Of course, you can pass in any code snippet during this period, and it will be placed in the <slot></slot> position.

What is a slot? Lets talk about how to use slots in Vue3 ##Similarly, you can also put variables between the tags

, such as <pre class="brush:php;toolbar:false">//父组件 <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></pre> Let me explain the following first The two words that appear frequently

slot

and slot content prevent confusion in subsequent readings:

What is a slot? Lets talk about how to use slots in Vue3 Same

Slot

represents this msg variable. Therefore, the child component slot can access the data scope of the parent component, while slot content cannot access the data of the child component (that is, the two &lt in the parent component Data in child components cannot be used between ;Child>), this is the so-called rendering scope. The method of slot passing parameters to slot content will be introduced later

Default content

is not provided in the parent component When any

slot content

is specified, we can specify the default content for the slot of the child component, such as <pre class="brush:php;toolbar:false">//子组件 <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></pre>at this time

parent component 1

Display default content

What is a slot? Lets talk about how to use slots in Vue3

Parent component 2

Display provided content

What is a slot? Lets talk about how to use slots in Vue3

NamedSlot

Many times one

slot

cannot meet our needs, we need multiple slots. So there is named slot, which is a slot with a name. To put it simply, the purpose of this Named Slot is to trap a carrot and let them stay where they should. For example, a slot with name <slot name="xx"></slot> is called a named slot. <slot></slot> for which name is not provided will be implicitly named "default". In the parent component, you can use the v-slot:xxx (can be abbreviated as #xxx) directive's <template></template> element to pass the name of the target slot. Go down and match the corresponding slot. For example, <pre class="brush:php;toolbar:false">//子组件 <template> <div>  <div> <slot></slot> </div>  <div> <slot></slot> </div>  <div> <slot></slot> </div> </div> </template> //父组件 <template> <div> <child>  <template> 小萝卜 </template> <template> 中萝卜 </template> <template> 大萝卜 </template> </child> </div> </template> <script> import Child from &#39;./Child.vue&#39; </script></pre>

What is a slot? Lets talk about how to use slots in Vue3 So there is no need to care about the order in the parent component. You only need to write the template and name it, and it will automatically go to its corresponding location.

Dynamic slot name

The dynamic slot name is the slot name in the form of a variable. We can modify this variable at any time to show different effects. It is written as

v-slot:[variable name]

or abbreviated as #[variable name]. <pre class="brush:php;toolbar:false">//父组件 <template> <div> <child>  <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></pre>

Scope slot

Said above

Slot content

It is impossible to access the data of subcomponents, but what if we want to access the status of subcomponents in Slot content? In fact,

slot

can be passed to the slot tag by binding properties to the slot content## in the parent component just like passing props to the component. #. First, let’s look at the value transfer method of the default 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>

You can also get the data provided by slot in the form of a structure

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

注意不能绑定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>

What is a slot? Lets talk about how to use slots in Vue3

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

写在最后

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

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

The above is the detailed content of What is a slot? Let's talk about how to use slots in Vue3. For more information, please follow other related articles on the PHP Chinese website!

Statement

This article is reproduced at:掘金社区. If there is any infringement, please contact admin@php.cn delete

Vue常见面试题汇总（附答案解析）Apr 08, 2021 pm 07:54 PM

本篇文章给大家分享一些Vue面试题（附答案解析）。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

5 款适合国内使用的 Vue 移动端 UI 组件库May 05, 2022 pm 09:11 PM

本篇文章给大家分享5 款适合国内使用的 Vue 移动端 UI 组件库，希望对大家有所帮助！

Vue中如何使用v-slot默认插槽Jun 11, 2023 am 09:27 AM

Vue是一款流行的前端框架，它提供了众多的指令帮助我们更好的进行开发。其中，v-slot是一个非常重要的指令，它可以让我们更加灵活地组合组件，提升代码的可读性和复用性。默认插槽是v-slot中的一种插槽类型，使用默认插槽可以将父组件中的HTML结构传递到子组件中，让子组件可以将其作为自己的子元素渲染。本文将向大家详细介绍Vue中如何使用v-