Slot meaning: After a subcomponent is introduced, information or labels are added to the inserted subcomponent element, so that there are three slots for inserting information or labels in the specified position of the subcomponent: The default slot, named slot, and scope slot are modified after Vue2.6.0, but are compatible with versions before 2.6.0. Only the slots after 2.6.0 are described in the blog post. The compatibility before 2.60 will be removed after vue3.0

1. Default slot

<body> <div id="app"> {{message}} <tode-item> This is a default slot <h3> This is the tag h3</h3></tode-item> </div> </body> <script Type ="text/javascript"> // Vue.component('tode-item', {template: '<div> // When there is no slot content to write to where the component is introduced, the default value in the child component slot is displayed. If there is no default value and slot content is not written, the slot content is empty. <slot> this is the default value of slot </slot> </div> '}); var app = new Vue({ el: "#app", data: { message: 'hello world! '}}); </script>Copy the code

2. Named slot: There are multiple slots in the sub-component, and the corresponding slot can be realized by specifying the name of the slot.

<body> <div id="app"> This is the slot name introduced after version 2.60 using V-slot < my-Component > <template V-slot :first>nihao</template> <template v-slot:last>hi</template> </my-component> <! <template #first>nihao</template> <template #last>hi</template> </my-component> </div> </body> <script type="text/javascript"> Vue.component('my-component',{ template: ` < div > < h4 > this is the first named slot < / h4 > < slot name = 'first' > < / slot > < h4 > this is the second named slot < / h4 > < slot name = 'ast' > < / slot > < / div > let app = `}) new Vue({ el: "#app", data: { } }) </script>Copy the code

Scope slot: passes the data in the child component data or the data in the child component props to the slot in the parent component for use

1) The two attributes are merged into one V-slot: slot name = ‘passed value’.

2) The slot content in the component page does not change.

3) V-slot cannot be used on HTML tags.

4) If it is the default slot, it can be written as V-slot = ‘XXX’.

5) Also added a way to deconstruct slot props and set default values

<body> <div id="app"> <my-component :message='msg'> <! <template v-slot:listbox='val'> <p>{{val.send. Text}}</p> </template> <! <div slot='sayWhat' slot-scope='thing'> {{thing. Said}}</div> <! Note that the scope slot is best used when the slot of the child component is batch looped, but not when the slot of the child component is non-batch looped. Just write it in a child component, not multiple times. -- > <! - this is an invalid write < div v - slot: sayWhat = 'thing' > said: {{thing. Said}} < / div > -- > <! <template v-slot:sayWhat='thing'> {{thing. Said}} </template> --> </my-component> </div> </body> <script type="text/javascript"> Vue.component('my-component',{ template: ` <div> <slot name='listbox' v-for='value in list' :send='value'></slot> <slot name='sayWhat' :said='message'></slot> < / div > `, props: [' message '], the data () {return {list: [{" id ": 10," text ":" apple "}, {" id ": 20," text ", "banana"}, {" id ": 30, "Text", "pear"}, {" id ": 40," text ", "mango"},]}}}) let app = new Vue ({el: "# app," data: {MSG: 'This is the content of the slot passed in dynamically ',}}) </script>Copy the code

Dynamic slot names have also been added

What is a dynamic slot name? Dynamic command parameters can also be used in V-slot, which is related to dynamic parameters added in 2.6.0

<template v-slot:[attrContent]='msg'>
    xxx
</template>
Copy the code

The attrContent is evaluated dynamically as a JavaScript expression, and the resulting value will be used as the final argument. For example, if attrContent is default, v-slot:default= ‘MSG’ is rendered.

Note:

1) Expressions can also be used within [] brackets alone, but without quotation marks and Spaces

2) Of course, this dynamic value can be calculated by methods, attributes, or data contents. The important thing is that the dynamic value is the scope of the reference component. Simply put, this is the scope of the parent component.

For example, v-slot:sayWhat= ‘thing’ above can be written as:

1) V-slot :[first+ SEC]= ‘thing

2) v – slot: [attr] = ‘thing’

3) v – slot: [attrs] = ‘thing’

4) v – slot: [getattr ()] = ‘thing’

export default{ data () { return { msg: Attr :'sayWhat', first:'say', SEC :'What',}}, components:{slotScope}, computed:{ attrs:function(){ return 'sayWhat' } }, methods:{ getattr(){ return 'sayWhat' } } }Copy the code