About VUE's compilation scope and slot scope slot issues

About VUE's compilation scope and slot scope slot issues

What are slots? The slot directive is v-slot, which currently replaces slot and slot-scope, slot content, vue instance, a set of content distribution APIs, and uses the slot element as the outlet for carrying distributed content.

Slots are divided into single slots, named slots, and scoped slots. The first two are relatively simple and will not be discussed here. Today's focus is on discussing scoped slots.
In simple terms, the content and style of the first two slots are determined by the parent component, which means what content is displayed and how it is displayed are determined by the parent component;
The style of a scoped slot is determined by the parent component, but the content is controlled by the child component. Simply put: the first two types of slots cannot bind data, and a scoped slot is a slot with bound data.

Here I will introduce the compilation scope and slot scope of VUE. Let's take a look!

In fact, if there are many components, when you use variables in a component, the scope of your variable is actually found in the code where it is defined. If it is not found, an error is reported. [This is very basic and everyone can see it]

Officially, everything in the parent component template will be compiled in the parent scope; everything in the child component template will be compiled in the child scope.

The following example illustrates this perfectly:

Scoped slots are a difficult point to understand, so you need to understand them carefully:

Now let me talk about the software requirements:

There is a set of data in the subcomponent: for example: pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++'], I want it to be in the slot of the subcomponent, some with a list display, some with a - link, and some with a * link.

Let's look at the source code first (slots are not used, it's hard-coded, and in this code, it's rewritten to use slot scope):

source code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Shopping Cart</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
            <!-- The template below the unused slot is hardcoded -->
        <template id="cpn">
                <div>
                	<ul>
                    <li v-for="item in pLanguages">{{item}}</li>
                	</ul>
                </div>
        </template>

        <div id="app">
              <cpn></cpn>
        </div>


        
        <script>
            const app = new Vue({
                el: "#app",
                components:
                    'cpn': {
                        template: "#cpn",
                        data() {
                            return {
                                pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++']
                            }
                        }
                    }
                }
            })
        </script>

    </body>
</html>

So if you use slots:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Shopping Cart</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
            <!-- Slots are used and the default values ​​of slots are set below -->
        <template id="cpn">
              <div>
               <slot> <!-- Changed -->
                   <ul>
                       <li v-for="item in pLanguages">{{item}}</li>
                   </ul>
               </slot>
              </div>
        </template>

        <div id="app">
              <cpn></cpn> <!-- Use the default value list format -->
              <cpn> <!-- CHANGED -->
              
                    <!-- The problem is here. I want to display the data in the data of the cpn component in the form of a link, but I can't get it.
                    Because of the scope, the scope here is the Vue instance app! Only the data of the Vue instance app can be obtained!
                     So the following code is wrong! ! ! So how do we solve the problem of slot code getting data from child components?
                     -->
                    
                    <span v-for="item in pLanguages">{{item + "-"}}</span>
                    
              </cpn>
        </div>


        
        <script>
            const app = new Vue({
                el: "#app",
                components:
                    'cpn': {
                        template: "#cpn",
                        data() {
                            return {
                                pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++']
                            }
                        }
                    }
                }
            })
        </script>

    </body>
</html>

The code is explained in detail and the problems are marked. In short:

Since it is not in the scope of the subcomponent, how to solve the problem of slot code obtaining data in the subcomponent?

Solution: Use slot scope slots

This is the end of this article about VUE's compilation scope and slot scope. For more relevant vue scope slot content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Understanding and example code of Vue default slot
  • Detailed explanation of anonymous slots and named slots in Vue
  • Basic usage examples of Vue named slots
  • Vue uses slots to distribute content operation examples [single slot, named slot, scoped slot]
  • Detailed explanation of how to use Vue anonymous, named and scoped slots
  • Detailed explanation of the usage of scoped slots in Vue.js slots
  • Detailed explanation of Vue scope slot implementation method and function
  • Vue default slot, named slot, scope slot definition and usage

<<:  mysql-8.0.17-winx64 deployment method

>>:  Tutorial on installing PHP on centos via yum

Recommend

Implementation of webpack-dev-server to build a local server

Table of contents Preface webpack-deb-server webp...

Centos7.5 installs mysql5.7.24 binary package deployment

1. Environmental preparation: Operating system: C...

Comprehensive understanding of html.css overflow

Comprehensive understanding of html.css overflow ...

Simple example of using Docker container

Table of contents 1. Pull the image 2. Run the im...

A detailed introduction to Linux file permissions

The excellence of Linux lies in its multi-user, m...

Four modes of Oracle opening and closing

>1 Start the database In the cmd command windo...

Detailed explanation of non-parent-child component value transfer in Vue3

Table of contents App.vue sub1.vue sub2.vue Summa...

VMware ESXI server virtualization cluster

Table of contents summary Environment and tool pr...

React implements the addition, deletion, modification and query of todolist

Table of contents Take todolist as an example The...

Linux uses stty to display and modify terminal line settings

Sttty is a common command for changing and printi...

How to write a picture as a background and a link (background picture plus link)

The picture is used as the background and the lin...

Use a table to adjust the format of the form controls to make them look better

Because I want to write a web page myself, I am al...

CSS uses radial-gradient to implement coupon styles

This article will introduce how to use radial-gra...

JavaScript removes unnecessary properties of an object

Table of contents Example Method 1: delete Method...

Quick understanding of Vue routing navigation guard

Table of contents 1. Global Guard 1. Global front...