An article analyzing slots in Vue

This article will give you an in-depth understanding of the slots invueand 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

来自父组件的内容

The content inslotcan be defined arbitrarily in the parent component. If there is noelement in the component, then when the parent component is called, the content between the component's start and end tags will be lost.

Sinceslotis in theSlotComponentcomponent, can the data in theSlotComponentcomponent 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 ines6Value, 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.

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 giveslotAddnameto distinguish where the content is rendered.

// named slot，名字叫 NamedSlot  // 在父组件中调用     

After adding thenameattribute toslot, the content can be distributed in the form ofv-slot:slotName. If thenameattribute is not given,namewill be defaulted todefault, which is equivalent tov-slot:default, or can be abbreviated to#default.

Note,v-slotcan only be added on, but there are also special cases, which will be discussed later.

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

Throughslot, 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 componentelement, and the value is the content you need to pass to the parent component.

// 子组件 组件名称为 SlotProp 
   
 //调用    

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

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

then passslotProps [key]to get this value.

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

 {{ slotProps.value1 }} 

As mentioned above, ifnameis not specified, it will be considereddefault. The same applies here,v-slot:default="slotProps"can be abbreviated asv-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 someES6syntax to operateslotProps, such asdeconstruction,prop renamesandassigns default valuesetc.

// 解构  {{ value1 }}  // 重命名,将 value1 重命名为 name1  {{ name1 }}  // 赋默认值  {{ value1 }} 

Dynamic slot name

slotSupported byThis way to implement dynamic slots.

Sometimes multipleslotare inserted in a loop in a basic component. For example,

can usedynamic slot name# when calling.##Loopto dynamically render the correspondingslot

（学习视频分享：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!