Shulou(Shulou.com)06/03 Report--

This article mainly introduces "the introduction and use scene of the scope slot of Vue.js". In the daily operation, I believe that many people have doubts about the introduction of the scope slot of Vue.js and the use scene. The editor consulted all kinds of materials and sorted out the simple and easy-to-use operation methods. I hope it will be helpful to answer the questions of "the introduction of the scope slot of Vue.js and the use scene". Next, please follow the editor to study!

Scope slot is a very useful feature in Vue.js, which can significantly improve the versatility and reusability of components. The problem is that it is really not easy to understand. Trying to figure out the intricate relationship between father and son is as painful as solving a thorny mathematical equation.

When you can't understand something, the best way is to experience its application in the process of solving the problem. This article will show you how to use scope slots to build a reusable list component.

Note: the complete code can be viewed at Codepen

The most basic component

The component we are about to build is called my-list, which is used to showcase a series of projects. What makes it special is that you can customize how the list item is rendered each time you use the component.

Let's start with the simplest single list: an array containing the name and number of edges of the geometry.

App.js

Vue.component ('my-list', {template:' # my-list', data () {return {title: 'Shapes', shapes: [{name:' Square', sides: 4}, {name: 'Hexagon', sides: 6}, {name:' Triangle', sides: 3}]};}}) New Vue ({el:'# app'})

Index.html

{{title}} {{shape.name}} ({{shape.sides}} sides)

Add a little style, and it will probably look like this:

More general-purpose my-list

Now we want to make my-list more generic and can render any type of list. This time we show a bunch of color names and corresponding color squares.

To do this, we need to abstract the data unique to the above example list. Since the items in the list may have different structures, we will give my-list a slot and let the parent component define how the list is displayed.

App.js

Vue.component ('my-list', {template:' # my-list', props: ['title']})

Index.html

{{title}}

Now, let's create two instances of the my-list component in the root instance, showing two lists of test cases: lists:

App.js

New Vue ({el:'# app', data: {shapes: [{name: 'Square', sides: 4}, {name:' Hexagon', sides: 6}, {name: 'Triangle', sides: 3}], colors: [{name:' Yellow', hex:'# F4D03F,}, {name: 'Green' Hex:'# 229954'}, {name: 'Purple', hex:' # 9B59B6'}]}) {shape.name}} ({{shape.sides}} sides) {{color.name}}

The effect is as follows:

Overqualified components

The component we just created does meet the requirements, but that piece of code is not very good. My-list is supposed to be a component to show the list, but we abstract the logical part of the rendering list into the parent component, so that the child components are only used to wrap the list here, which seems to be overqualified.

To make matters worse, there is a lot of duplicate code (for example,) in the declarations of the two components. If we can write this code in the subcomponents, then the subcomponents will no longer be "casual roles".

Scope slot

Ordinary slots can't meet our needs, so scope slots come in handy. The scope slot allows you to pass a template rather than a rendered element to the slot. It is called the "scope" slot because although the template is rendered in the parent scope, it can get the data of the child component.

For example, a component child with a scope slot would look something like this:

The parent component that uses this component will declare a template element in the slot. This template element will have a scope attribute that points to an object, and any attribute added to the slot (located in the subcomponent template) will be used as an attribute of that object.

Hello from parent {{props.my-prop}}

Will be rendered as:

Hello from parent Hello from child

Using scope slots in my-list

We pass two list arrays to my-list via props. The normal slot is then replaced with a scope slot so that the my-list can be responsible for iterating over the list items, while the parent component can still define how each item is presented.

Index.html

Then we let my-list iterate over the project. In the v-for loop, item is the alias for the current iteration project. We can create a slot and bind that project to the slot with vtalk bind = "item".

App.js

Vue.component ('my-list', {template:' # my-list', props: ['title',' items']})

Index.html

{{title}}

Note: you may not have seen the use of v-bind without parameters before. This usage will bind all the attributes of the entire object to the current element. This usage is common when it comes to scope slots, because bound objects may have many properties, and it is obviously too troublesome to enumerate them one by one and bind them manually.

Now, go back to the root instance and declare a template in the slot of my-list. First take a look at the list of geometries (the list in the first example). The template we declare must have a scope attribute, which is assigned to shape. The alias shape gives us access to the scope slot. In the template, we can continue to use the markup in the original example to show the project.

{shape.name}} ({{shape.sides}} sides)

The whole template looks like this:

{shape.name}} ({{shape.sides}} sides) {{color.name}}

Conclusion

Although the amount of code has not been reduced after using the scope slot, we leave all the common functions to the subcomponents, which significantly improves the robustness of the code.

At this point, the study of "introduction to the scope slot and usage scenario of Vue.js" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.