Vue: Slots are so sweet

Vue: Slots are so sweet

I. Introduction

• Slots provide flexibility for components, and flexible display content can be achieved by modifying the content of the slots when using components.
• The following formally introduces how to use the slot.

Second, the use of slots

1. Anonymous Slots

<comp>yivi</comp>

let comp = {
	template : `
		<div>
            <h1>怎央打</h1>
			<p>朋友们好，我是混元形意太极门掌门人<slot></slot></p>
		</div>		
	`
}

Rendering result:

• In addition, you can also add default values ​​for the slots

<comp>yivi</comp>
// 如果不传入参数，则默认为马保国
<comp></comp>

let comp = {
	template : `
		<div>
            <h1>怎央打</h1>
			<p>朋友们好，我是混元形意太极门掌门人<slot>马保国</slot></p>
		</div>	
	`
}

Rendering result:

2. Named Slot

• What if we not only modify the content, but also modify the title?
• Vue provides slotparameters, which can be passed into the corresponding slot when passing parameters.

<comp>
	<template slot="title">闪电五连鞭</template>
    <template slot="name">源来氏佐田</template>
</comp>

let comp = {
	template : `
		<div>
            <h1><slot name="title">怎央打</slot></h1>
			<p>朋友们好，我是混元形意太极门掌门人<slot name="name">马保国</slot></p>
		</div>
	`
}

Rendering result:

3. v-slot

• This syntax is suitable for version 2.6.0+

• Grammatical format

• v-slot:slotName
  

• Under the new syntax, anonymous slots point todefault

Use case:

<comp>
	<template v-slot:title>松果弹抖闪电鞭</template>
    <template v-slot:name>yivi</template>
</comp>

Rendering result:

Note: In the new version, the v-slot attribute must be set on the template element, the old version has no requirement

• Shorthand: v-slot:name => #name

4. Scope slot

• Applicable scenario of scope slot: parent component accesses internal data of child component

a. Old version

slot-scope="slotProps"

• The slotProps here is a custom variable name that points to the return value of the data function of the subcomponent;

• The old and new grammar cannot be mixed!

  The old and new syntax cannot be mixed on a component label.
  slot="xxx" slot-scope="xx" is the old way of writing, yes
  v-slot:xxx slot-scope="xxx" The old and new way of writing is mixed, and the
  rendering error is directly reported : Unexpected mixed usage of different slot syntaxes

Implementation example:

<comp>
            <template slot="title" slot-scope="slotProps">{
   
   { slotProps.title }}</template>
            <template slot="master" slot-scope="slotProps">{
   
   { slotProps.master }}</template>
        </comp>

 let comp = {
            template: `
		        <div>
                    <h1><slot name="title" :title="title"></slot></h1>
			<p>朋友们好，我是混元形意太极门掌门人<slot name="master" :master="master"></slot></p>
		        </div>
		    `,
            data() {
                return {
                    title: "怎央打",
                    master: "马保国"
                }
            }
        }

b. New version

v-slot:name="slotProps"

• This syntax not only completes slot pointing, but also completes data mounting

Use case:

<comp>
	<template v-slot:title="slotProps">{
   
   { slotProps.title }}</template>
    <template v-slot:master="slotProps">{
   
   { slotProps.master }}</template>
</comp>

 let comp = {
            template: `
		        <div>
                    <h1><slot name="title" :title="title"></slot></h1>
			<p>朋友们好，我是混元形意太极门掌门人<slot name="master" :master="master"></slot></p>
		        </div>
		    `,
            data() {
                return {
                    title: "怎央打",
                    master: "马保国"
                }
            }
        }

Rendering result:

Three, parent-child components pass values

Applicable to 2.6.0+

Parent component:

// 使用了简写语法代替v-slot
<template #swiperSlide='{dataMes}'>
  ...
</template>

Subassembly:

<slot 
  name="swiperSlide" 
  :dataMes='dataMes'
></slot>

• The parent component obtains the child component through #slotName and the data in the child component through {data name}