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

Detailed explanation of the usage of scoped slots in Vue.js 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

  1. The parent component adds slot="xxx" attribute to the tag to be distributed
  2. In slot標簽of the corresponding distribution location, add name="xxx" attribute to the subcomponent
  3. 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.

  1. In the child component, just pass the data to the slot like you would pass a prop to a component
  2. 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:
  • Vue.js dynamic component analysis
  • Vue.js parent-child component communication dynamic binding example
  • Implementation of dynamic component templates in Vue.js
  • Detailed explanation of vue.js dynamic components
  • Front-end architecture vue architecture slot usage tutorial
  • Basic usage specifications of slots in Vue2
  • Vue default slot, named slot, scope slot definition and usage
  • Summary of the use of vue.js dynamic components and slots

<<:  mysql solves time zone related problems

>>:  CUDA8.0 and CUDA9.0 coexist under Ubuntu16.04

Recommend

Detailed explanation of the difference between a href=# and a href=javascript:void(0)

a href="#"> After clicking the link, ...

MySQL transaction autocommit automatic commit operation

The default operating mode of MySQL is autocommit...

MySQL 5.7.18 binary package installation tutorial under Linux (without default configuration file my_default.cnf)

I am currently learning MySQL. I am a complete no...

Implementation of the function of the vue circular percentage progress bar component

Anyone in need can refer to it. If you have tried...

IIS7 IIS8 http automatically jumps to HTTPS (port 80 jumps to port 443)

IIS7 needs to confirm whether the "URL REWRI...

Implementation of removing overlapping time and calculating time difference in MySQL

Table of contents need: drive: Ideas: accomplish:...

In-depth explanation of SQL statement execution (MySQL architecture overview -> query execution process -> SQL parsing order)

Preface: I have always wanted to know how a SQL s...

Instructions for using the --rm option of docker run

When the Docker container exits, the file system ...

JavaScript to implement the web version of the snake game

This article shares the specific code for JavaScr...

How to directly reference vue and element-ui in html

The code looks like this: <!DOCTYPE html> &...

Let's talk about what JavaScript's URL object is

Table of contents Overview Hash Properties Host p...

MySQL 5.7.24 compressed package installation and configuration method graphic tutorial

This article shares the installation tutorial of ...

Introduction to the use and difference between in and exists in MySQL

First put a piece of code for(int i=0;i<1000;i...

About the problems of congruence and inequality, equality and inequality in JS

Table of contents Congruent and Incongruent congr...

HTML table markup tutorial (43): VALIGN attribute of the table header

In the vertical direction, you can set the alignm...