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

This article mainly introduces the example analysis of Vue.js feature Scoped Slots, which is very detailed and has certain reference value. Friends who are interested must finish it!

What is scoped slots?

A scoped slot is a special type of slot that functions as a reusable template (that can be passed data to) instead of already-rendered-elements.

The above is the official definition.

Scope slot (Scoped Slots) is a very useful feature in vue.js, which can make components more generic and reusable. The only problem is that it is difficult to understand. Trying to make you understand the interweaving of father and child scopes is like solving a math problem.

To put it simply, slot is a slot, it can be replaced, and its content can get the context of the current component.

Give me a simple example.

/ / button.vue / / is equivalent to occupying export default {} / / app.vue Buton with text / / this replaces the position of slot Profile import Button from'. / components/Button.vue' export default {name: 'app', components: {Button}}

Slot is actually a placeholder, and the slot position of button.vue will be replaced by one in app.vue.

Something in a complex example 1:slot can get the context information of the parent component

/ / list.vue / / this is the placeholder of slot / / app.vue / / you can get that item,item originally belongs to the List component. That is, slot gets the context of the parent component. {{row.item.text}}

For explanation, see the code comments above. Note that the name (row) here is optional for slot-scope= "row".

Named slots

Can be put directly on the ordinary tag, can be put on the template tag

The scope in slot is normal tags or template is consistent. Cannot access the scope of the parent component.

Complex example 2:slot can put things inside, is the default template, can be replaced.

/ / table.vue / / A slot is defined here, whose name is columns, which means that the content here is replaceable {{column}} / / where slot has a prop row {{itemValue (item, column)}} / / app.vue / / there is a slot= "columns" here. It means to replace the slot Title Image Actions in table.vue called columns / / here replace the internal content {{row.title}} that slot in table.vue is row.

The above is all the content of the article "sample Analysis of Vue.js feature Scoped Slots". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.