Detailed explanation of the usage of scoped slots in Vue.js slots

No slots
Vue2.x Slots

With slots
Named Slots
No slot attribute
Slot simple example application
Scoped slots (new in 2.1.0)

Vue3.x Slots

Slots
Scoped Slots

No slots

<div id="app">
    <child>
        <span>1111</span>    
    </child>
</div>


<script>
    // Register child component Vue.component("child", {
        template: "<div>This is a div tag</div>"
    });

    // Initialize the parent component new Vue({
        el: "#app"
    });
</script>

span標簽in the template will be replaced with " <div>這是一個div標簽</div> " as shown below:

Write the picture description here

Vue2.x Slots

With slots

In simple terms, using slot標簽, you can put <span>1111</span> where you want it to appear in the child component. As shown below:

<div id="app">
    <child>
        <span>1111</span>    
    </child>
</div>


<script>
    // Register child component Vue.component("child", {
        template: "<div>This is <slot></slot>a div tag</div>"
    });

    // Initialize the parent component new Vue({
        el: "#app"
    });
</script>

Write the picture description here

Even if there are multiple tags, they will be inserted together, which is equivalent to replacing the <slot></slot> tag with the tag placed by the parent component in the child component. As shown below:

<div id="app">
    <child>
        <span>1111</span>   
        <i>2222</i>
        <b>3333</b>
    </child>
</div>


<script>
    // Register child component Vue.component("child", {
        template: "<div>This is <slot></slot>a div tag</div>"
    });

    // Initialize the parent component new Vue({
        el: "#app"
    });
</script>

Write the picture description here

Named Slots

The parent component adds slot="xxx" attribute to the tag to be distributed
In slot標簽of the corresponding distribution location, add name="xxx" attribute to the subcomponent
Then the corresponding labels will be placed in the corresponding positions. As shown below:

<div id="app">
    <child>
        <span slot="one">1111</span>
        <i slot="two">2222</i>
        <b slot="three">3333</b>
    </child>
</div>


<script>

    // Register child component Vue.component("child", {
        template: `<div>
                        This is <slot name='one'></slot>
                        One <slot name='two'></slot>
                        div
                        <slot name='three'></slot>
                        Tags </div>`
    });


    // Initialize the parent component new Vue({
        el: "#app"
    });
</script>

Write the picture description here

No slot attribute

If there is no slot attribute in the subcomponent tag, the default value will be displayed

    <div id="app">
        <child>
            <!-- <span slot="one">1111</span> -->
            <i slot="two">2222</i>
            <!-- <b slot="three">3333</b> -->
        </child>
    </div>

    <script>
        // Register child component Vue.component("child", {
            template: `<div>
                            <slot name='one'>no one</slot>
                            <slot name='two'>no two</slot>
                            <slot name='three'>no three</slot>
                        </div>`

        });

        // Initialize the parent component new Vue({
            el: "#app"
        });
    </script>

slot="two" is inserted into a fixed position, as shown below:

Write the picture description here

Slot simple example application

Think about the various slots on your computer motherboard. Some are for the CPU, some are for the graphics card, some are for the memory, and some are for the hard disk. So suppose there is a component called computer, and its template is template, as follows:

<body>
    <div id="app">
        <computer>
            <div slot="CPU">Intel Core i7</div>
            <div slot="GPU">GTX980Ti</div>
            <div slot="Memory">Kingston 32G</div>
            <div slot="Hard-drive">Samsung SSD 1T</div>
        </computer>
    </div>

    <script>
        // Register subcomponent Vue.component("computer", {
            template: `<div>
                            <slot name="CPU">Plug in your CPU here</slot>
                            <slot name="GPU">Plug in your graphics card here</slot>
                            <slot name="Memory">Insert your memory here</slot>
                            <slot name="Hard-drive">Plug your hard drive here</slot>
                        </div>`
        });

        // Initialize the parent component new Vue({
            el: "#app"
        });
    </script>
</body>

Write the picture description here

Scoped slots (new in 2.1.0)

A scoped slot is a special type of slot that acts as a reusable template (that can be passed data) to replace an already rendered element.

In the child component, just pass the data to the slot like you would pass a prop to a component
In the parent component, the data passed by the child component is obtained through slot-scope="scoped" . The alias of this data object is scoped . This is the template for a scoped slot.

<div id="app">
    <child>
    	<!-- 2. Receive myName data, scoped to { "myName": "猫老板的豆" } -->
        <template slot="content" slot-scope="scoped"> 
            <div>{{ scoped.myName }}</div>
        </template>
    </child>
</div>

<script>
	Vue.component('child', {
		data () {
			return {
				myName: 'Cat Boss's Beans'
			}
		},
		template: `<slot name="content" :myName="myName"></slot>` // 1. Throw out myName data })
	
	new Vue({
		el: "#app"
	});
</script>

Vue3.x Slots

Slots

<!-- Parent component -->
<template>
	<Child>
		<!-- Vue2.x writing <div slot="parent">
            <div>parent component</div>
		</div>
		 -->
		<template v-slot:parent>
            <div>parent component</div>
        </template>
	</Child>
</template>


<!-- Child Component -->
<template>
	<slot name='parent'>child component</slot>
</template>

Scoped Slots

In Vue2.x, named slots and scoped slots are implemented using slot and slot-scope respectively. In Vue3.x, slot and slot-scope are combined and used together.

Parent component:

<template>
	<Child>
		<!-- <template slot="content" slot-scope="scoped"> -->
		<template v-slot:content="scoped">
			<div>{{scoped.myName}}</div>
		</template>
	</Child>
</template>

Subcomponents:

<template>
	<slot name="content" :myName="myName"></slot>
</template>

<script>

import { ref } from 'vue'
export default {
	setup () {

		let myName = ref("Mr. Cat's Bean")

		return { myName }
	},
}
</script>

This is the end of this article about the detailed usage of scoped slots of Vue.js slots. For more content related to scoped slots of Vue.js slots, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in: