Vue learning 12 – slots

What is a slot

A slot is a placeholder provided by a child component to the parent component. The parent component can fill any template code in this placeholder, such as HTML, component, etc. the filled content will replace the slot tag in the child component. It is equivalent to placing a placeholder in the child component, and the HTML fragment passed in by the parent component will be loaded into the placeholder.
​
The simple understanding is to occupy the pit in the child component and fill the pit in the parent component. html fragments placed between component elements are loaded by slot placeholders.
​

How are slots used

1. Specify the slot name using the slot component in the subassembly:
2. User: directly add html fragments to be transferred between child component elements introduced by parent component: < component tag > transfer hmtl fragment < / component tag >

You can also specify the slot name and place the html fragment in the specified slot position
1) < component label > < div slot = "slot name" > < / component label >
2) < template V-slot: slot name = "received data" > < / template >
​

Slot value transfer:

The slot is a slot tag from the child to the parent, so the value is passed by attribute
​
It is used in the parent component to insert html fragments between component elements. There are two methods to receive data:
1) Slot scope = "received data"
2) < template V-slot = "received data" > < / template >
​
Note:
1) v-slot can only be used in the template tag, otherwise an error will be reported.
2) The data received by the above two methods is an overall object encapsulated by the passed object. Even if there is only one passed parameter, the value of the parameter should be obtained through "." or brackets [].

Parent to child, just transfer data directly from the normal parent to the child.

Example

Parent component index.vue

<template>
    <div>
        <list :columns="columns" :data="data">
            <h3 slot="title">To do list</h3>
          
          <!-- v-slot Only in template Use in label -->
           <template v-slot:state="state">
               <span>
                   {{state.state}}
               </span>
           </template> 

            <div slot="opt" slot-scope="data">
                <button v-if="data.state === 'newly added'" @click="clickEvt(data.id)">handle</button>
                <button v-else @click="clickEvt(data.id)">activation</button>
            </div>
        </list>
    </div>
</template>

<script>
import List from './component/List.vue'

export default {
  components: { List },
    comments:{List},
    data(){
        return {
            columns:[
                {key: 'title', name: 'title'},
                {key: 'date', name: 'time'},
                {key: 'handler', name: 'Handler'},
                {key: 'time', name: 'Completion time'},
                // Use the status to demonstrate the value transfer of v-slot slot 
                {slot: 'state', name: 'state'},
                // Use the operation to demonstrate the general specified slot and slot value transfer
                {name: 'operation'}
            ],
            data:Array(10).fill("").map((_, i) => {
                return {id:"id-" + i, title:"event-" + i, handler:"zs", time:new Date(), date:"21-10-28", state:Math.random() > .5 ? "newly added" : "complete"}
            })
        }
    },
    methods:{
        clickEvt(id){
           this.data.map(it => {
               if(it.id === id){
                   if(it.state === "newly added"){ it.state = "complete"}
                   else {it.state = "newly added"}
                   return it
               }
           }); 
        }
    }
    
}
</script>

​

Subcomponent List.vue

<template>
    <div>
        <div>
            <slot name="title"/>
        </div>
        <table>
            <thead>
                <tr>
                    <th v-for="col in columns" :key="col.key">{{col.name}}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="row in data" :key="row.id">
                    <!-- Traverse the array of title blocks to key Value as data object key Value (key name),This way to match, so that the arrangement is good and messy -->
                    <td v-for="col in columns" :key="col.key">
                      <!-- When col.key When the value of exists, the current value is displayed -->
                        <div v-if="!!col.key">{{row[col.key]}}</div>
                        <div v-else-if="!!col.slot">
                            <slot name='state' :state="row.state"/>
                        </div>
                        <div v-else>
                            <slot name='opt' :id="row.id" :state="row.state"/>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    props:{
        columns:{
            type:Array,
            required:true
        },
        data:{
            type:Array,
            default:() =>[]
        }
    }

}
</script>

​