An article analyzing slots in Vue

This article will give you an in-depth understanding of the slots in vue and help you play with Vue slots. I hope it will be helpful to everyone!

In Vue, slots are a very powerful function, which can greatly enhance the flexibility of encapsulated components. For example, if you use slots when encapsulating a component, Then when the parent component calls it, the content here can be freely defined by the parent component, without having to think about how to cover various usage scenarios when encapsulating the component. (Learning video sharing: vue video tutorial)

Basic Slot

Suppose we now have a component that needs to be encapsulatedSlotComponent

<template>
  <div>这是一个slot：<slot> </slot></div>
</template>

<SlotComponent>来自父组件的内容</SlotComponent>

The content in slot can be defined arbitrarily in the parent component. If there is no <slot> element in the component, then when the parent component is called, the content between the component's start and end tags will be lost.

Since slot is in the SlotComponent component, can the data in the SlotComponent component be used when calling it in the parent component? Woolen cloth? Obviously not possible, because they are in different scopes.

All content in the parent template is compiled in the parent scope; all content in the child template is compiled in the child scope.

The default content of the slot

The slot can also set the default content, which is a bit like the default function parameter in es6 Value, when the parent component does not provide content when called, then this default value will be rendered. If content is provided, it will replace the default content.

<template>
  <div>
    <slot>这是slot的默认内容</slot>
  </div>
</template>

<DefaultSlot></DefaultSlot>

No content is provided between the tags when called, and the default value is rendered, becoming a cover-up content.

Named Slot

If I need to use the slot in multiple places in the component, then I need to give slot Add name to distinguish where the content is rendered.

// named slot，名字叫 NamedSlot
<template>
  <div>
    这是具名插槽
    <div>
      <slot name="slot1"></slot>
    </div>
    <div>
      <slot name="slot2"></slot>
    </div>
    <div>
      <slot name="slot3"></slot>
    </div>
  </div>
</template>

// 在父组件中调用
<NamedSlot>
    <template v-slot:slot1>这是插入slot1的内容</template>
    <template v-slot:slot2>这是插入slot2的内容</template>
    <template v-slot:slot3>这是插入slot3的内容</template>
</NamedSlot>

After adding the name attribute to slot, the content can be distributed in the form of v-slot:slotName. If the name attribute is not given, name will be defaulted to default, which is equivalent to v-slot:default, or can be abbreviated to #default.

Note, v-slot can only be added on <template> , but there are also special cases, which will be discussed later.

How does the slot access the content of the child component?

Through slot, we can add content to the child component in the parent component, but the role of the parent-child component The domains are different. What should we do if we want to use the data of the child component in the parent component?

You can bind attributes on the child component <slot> element, and the value is the content you need to pass to the parent component.

// 子组件 组件名称为 SlotProp
<div>
    <slot name="slot1" :value1="child1"></slot>
    <slot name="slot2" :value2="child2"></slot>
</div>
//调用
<SlotProp>
  <template v-slot:slot1="slotProps">
    {{ slotProps.value1 }}
  </template>
  <template v-slot:slot2="slotProps">
    {{ slotProps.value2 }}
  </template>
</SlotProp>

To put it simply, it is to bind a value in the form of :key='value' on slot,

in the parent component When calling, get this value in the form of v-slot:slotName="slotProps", the slotProps name can be defined by yourself,

then pass slotProps [key] to get this value.

If the component has only one default template, you don’t need to write v-slot:slotName="slotProps" on template. You can directly write it on the component name. Write v-slot

<SlotProp v-slot:default="slotProps">
    {{ slotProps.value1 }}
</SlotProp>

As mentioned above, if name is not specified, it will be considered default. The same applies here,v-slot:default="slotProps" can be abbreviated as v-slot="slotProps".

Destructuring of slotProps

The inner workings of scoped slots is to include the contents of your slot in a function that is passed in a single argument

Based on the implementation principle of slots, we can also use some ES6 syntax to operate slotProps, such as deconstruction, prop renames and assigns default values ​​ etc.

// 解构
<SlotProp v-slot="{ value1 }">
    {{ value1 }}
</SlotProp>

// 重命名,将 value1 重命名为 name1
<SlotProp v-slot="{ value1: name1 }">
    {{ name1 }}
</SlotProp>

// 赋默认值
<SlotProp v-slot="{ value1 = &#39;这是默认值&#39; }">
    {{ value1 }}
</SlotProp>

Dynamic slot name

slot Supported by <template v-slot:[dynamicSlotName]> This way to implement dynamic slots.

Sometimes multiple slot are inserted in a loop in a basic component. For example,

<div v-for="item in slotList" :key="item">
      <slot :name="item"></slot>
</div>

can use dynamic slot name# when calling. ##Loop to dynamically render the corresponding slot

<template
  v-for="item in slotList"
  v-slot:[item]
>
    {{item}}
</template>

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

The above is the detailed content of An article analyzing slots in Vue. For more information, please follow other related articles on the PHP Chinese website!