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

MySQL EXPLAIN statement usage examples

Table of contents 1. Usage 2. Output results 1.id...

Detailed explanation of the process of deploying Tomcat and creating the first web project in IDEA 2020.3.1

Table of contents Tomcat Introduction Tomcat depl...

Analysis of the Docker image construction principle (you can build an image without installing Docker)

Building an image is a very important process in ...

Detailed graphic tutorial on how to enable remote secure access with Docker

1. Edit the docker.service file vi /usr/lib/syste...

Use html-webpack-plugin' to generate HTML page plugin in memory

When we package the webpackjs file, we introduce ...

Solution to the problem that the virtual machine Ubuntu 16.04 cannot connect to the Internet

I just installed Ubuntu and there was no network ...

Vue implements a shopping cart that can change the shopping quantity

This article shares with you how to use Vue to ch...

Tutorial on installing mysql under centos7

Recently, I plan to deploy a cloud disk on my hom...

A brief introduction to MySQL dialect

Putting aside databases, what is dialect in life?...

Several implementation methods of the tab bar (recommended)

Tabs: Category + Description Tag bar: Category =&...

Mysql 5.7.18 Using MySQL proxies_priv to implement similar user group management

Use MySQL proxies_priv (simulated role) to implem...

Detailed explanation of the perfect solution to the VMware black screen problem after MacOS catalina upgrade

Perfect solution to VMware black screen after Mac...

In-depth understanding of javascript class array

js array is probably familiar to everyone, becaus...

HTML simple web form creation example introduction

<input> is used to collect user information ...

Several ways to introduce pictures in react projects

The img tag introduces the image Because react ac...