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