Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to use slot in vue componentization". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to use slot in vue componentization" can help you solve the problem.

Preface

Slot can open a slot in a child component, and when the parent component references the build, it can define the function or module to be displayed in this slot.

1. Single slot

Write the slot tag in the child component at the appropriate location, and when the parent component refers to the child component, write the element to be inserted into the slot in the child component tag

You can also set slot when the parent component does not set a slot, the slot of the child component displays the content by default

Parent component .vue

This is the slot alternative to the parent component!

Import childComponment from'@ / components/childComponment.vue'export default {name: "home", components: {childComponment}, data () {return {message:''}

Sub-component childComponment.vue

This is the subcomponent childComponment! If the parent component does not insert content, I can set the default display content export default {name: "childComponment", data () {return {content:''}

two。 Named slot (multiple slots at the same time)

Assign a name to slot, you can distribute multiple slot slots, but only one unnamed slot

The contents of the slot slot of the parent component, and those that do not write slot= "xxx" will be inserted into the unnamed slot of the child component.

If no unnamed slot is specified (the default slot), excess content in the parent component will be discarded.

Unnamed slot-1 of the parent component's header parent component's footer parent component

Unnamed slot-2 of the parent component

Import childComponment from'@ / components/childComponment.vue'export default {name: "home", components: {childComponment}, data () {return {message:''}

Sub-component

This is the normal content of the subcomponent childComponment! Header-slot subcomponent default unnamed slot subcomponent default footer-slot export default {name: "childComponment", data () {return {message:'}; .childComponment {font-size: 16px;} .header {height:100px; border:1px solid red; color: red;} .container {height: 500px; border:1px solid black; color: black;} .footer {height:100px; border:1px grey solid; color: grey;}

3. Scope slot

{{slotProps}}

Import childComponment from'@ / components/childComponment.vue'export default {name: "home", components: {childComponment}}

Sub-component

This is the normal content of the subcomponent childComponment!

Tips:

Acting on a slot can also be a named slot

Case: list component

This is the most frequently used case for slots, allowing components to customize how each item of the component should be rendered.

This is about page {{myListProps.bookName}} import myList from'@ / components/myList.vue'export default {components: {myList}, data () {return {books: [{name: 'css revelation'}, {name: 'simple nodejs'}, {name:' javascript Design pattern and Development practice']}

Sub-component myList.vue

This is myList page export default {props: {books: {type: Array, default: function () {return []}, mounted () {console.log (this.books)}}

In fact, the above case can be directly in the parent component for loop, here only as a demonstration slot scope slot

The main usage scenarios of scope slots in actual development are: not only the slot of sub-components can be reused, but also the content of slot can be inconsistent.

4. Visit slot

Vue2.0 provides a $slot method to access slot

The code here takes the code of * * named slot (using multiple slots at the same time) * * as an example to modify the subcomponent childComponment.vue

Export default {name: "childComponment", data () {return {message:''}}, mounted () {let header = this.$slots.header let main = this.$slots.default let footer = this.$slots.footer console.log (header) console.log (main) console.log (footer) console.log (footer [0] .elm [XSS _ clean])}}

Print the results:

The content of elm is slot content, and its structure is as follows:

This is the end of the introduction on "how to use slot in vue componentization". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.