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 free installation version (zip) installation and configuration detailed tutorial

This article shares the installation and configur...

Linux command line quick tips: How to locate a file

We all have files stored on our computers -- dire...

Summary of 6 Linux log viewing methods

As a backend programmer, you deal with Linux in m...

MySQL transaction concepts and usage in-depth explanation

Table of contents The concept of affairs The stat...

How to implement paging query in MySQL

SQL paging query:background In the company's ...

Detailed explanation of two ways of Linux service management: service and systemctl

1.service command The service command actually go...

Solution to the blank page after vue.js packaged project

I believe that many partners who have just come i...

Baota Linux panel command list

Table of contents Install Pagoda Management Pagod...

Windows 10 and MySQL 5.5 installation and use without installation detailed tutorial (picture and text)

This article introduces the installation and use ...

Detailed explanation of how to manually deploy a remote MySQL database in Linux

1. Install mysql Run the following command to upd...

CSS code to achieve 10 modern layouts

Preface I watched web.dev's 2020 three-day li...

MySQL group by method for single word grouping sequence and multi-field grouping

I have created a goods table here. Let's take...

MySQL DML statement summary

DML operations refer to operations on table recor...

Common usage of regular expressions in Mysql

Common usage of Regexp in Mysql Fuzzy matching, c...

How to prevent iframe from jumping to the page in HTML and use iframe to embed WeChat web version in the page

I just want to make a small thing that combines w...