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

HTML validate HTML validation

HTML validate refers to HTML validation. It is the...

Analysis of MySQL query sorting and query aggregation function usage

This article uses examples to illustrate the use ...

Web design must also first have a comprehensive image positioning of the website

⑴ Content determines form. First enrich the conten...

Can CSS be used like this? The art of whimsical gradients

In the previous article - The charm of one line o...

Example code for implementing complex table headers in html table

Use HTML to create complex tables. Complex tables...

Complete steps to implement face recognition login in Ubuntu

1. Install Howdy: howdy project address sudo add-...

How to update, package, and upload Docker containers to Alibaba Cloud

This time, we will try to package the running con...

How to configure jdk environment under Linux

1. Go to the official website to download the jdk...

Detailed explanation of the application of CSS Sprite

CSS Sprite, also known as CSS Sprite, is an image...

Docker installs redis 5.0.7 and mounts external configuration and data issues

Redis is an open source NoSQL database written in...

How to use CSS media query aspect-ratio less

CSS media query has a very convenient aspect rati...

Tutorial on how to connect and use MySQL 8.0 in IDEA's Maven project

First, let's take a look at my basic developm...

Problems and solutions for MYSQL5.7.17 connection failure under MAC

The problem that MYSQL5.7.17 cannot connect under...

Analysis of the implementation process of Nginx high availability solution in production environment

Preparation: 192.168.16.128 192.168.16.129 Two vi...

Nginx implements dynamic and static separation example explanation

In order to speed up the parsing of the website, ...