Slot

Earlier, we described how props pass data to enable component reuse in a polymorphic manner. While props is a good way to reuse components and add flexibility to their use, there is a parent-child relationship between the consuming component and its parent. The parent component controls the child component by passing in different data in the HTML content. The Slot approach is also a good way to increase component flexibility and give the user more control over the component. With slots, components can be reused with greater freedom. The parent component can easily control the details of the child component.

Slot is used in multiple scenarios. For example, on a detail page, a certain section displays different content based on the type of the detail page. For example, some information in the neighborhood details and rental details may vary based on the type of the detail page.

First Slot.

<template>
    <div>
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name:"Card"
    }
</script>

Copy the code

The component creates a slot label, which acts like a placeholder, and then defines HTML content in the child component to replace the slot.

<template> <div class="container"> <form class="form"> <fieldset class="fieldset"> <div class="control"> <Input class="input" type="text" v-model="name"/> </div> </fieldset> </form> <card> <div class="card"> <div class="card-image">  <figure class="image is-4by3"> <img src="@/assets/quick_sort.png" alt="Placeholder image"> </figure> </div> </div> </Card> <Card> <div class="card"> <div class="card-content"> Machine learning </div> </div> </Card> </div> </template> <script> import Input from "./components/Form/Input.vue" import Card from "./components/Tut/Card.vue" export default { name: 'App', data(){ return { name:"" } }, components: { Input, Card } } </script> <style> </style>Copy the code
  • Importing the Card Componentimport Card from "./components/Tut/Card.vue"
  • through importImport the Card component, and then in<Card></Card>Between tags define HTML content
  • The introduction of<slot> Default value </slot>Default values are used if no content is given between Card tags

How do I support multiple slots

There may be multiple slots in a component that can be named so that multiple slots can be defined in a component and then replaced by slot names.

<template>
    <div>
        <div class="card">
            <header class="card-header">
                <slot name="header"></slot>
            </header>
            <div class="card-image">
                <slot name="img"></slot>
            </div>
            <div class="card-content">
                <slot></slot>
            </div>
        </div>
    </div>
</template>
Copy the code

To demonstrate this code, define three components in the Card component template and name each slot with name=’header. You can also leave an unnamed slot as the default slot.

<Card> <template V-slot :header> <p class="card-header-title"> Quicksort algorithm </p> </template> <template V-slot :img> <figure class="image is-4by3"> <img src="@/assets/quick_sort.png" alt="Placeholder image"> </figure> </template> <template v-slot:default> <div class="content"> Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. </div> </template> </Card>Copy the code

After the slot is defined by Card, we can use the Card component to specify which slot the template will replace when calling the component using the template’s V-slot :img property.

Slot by value

Slot Prop exposes the valence property to the Template component that is replacing the Slot template.

<template> <div v-for="tut in tuts" class="card" :key="tut.id"> <div class="card-header"> <div class="card-header-title">{{tut.title}}({{tut.category}})</div> </div> </div> </template> <script> export default { Name: 'TutList' data () {return {tuts: [{id: 0, the title: "quick sort algorithm," category: "algorithm"}, {id: 1, the title: "merge sort algorithm," category: "algorithm"}, {id: 2, the title: "radix sort algorithm," category: "algorithm"}]}}} < / script >Copy the code
<template> <div class="container"> <TutList/> </div> </template> <script> import TutList from "./components/TutList.vue"  export default { name: 'App', data(){ return { name:"" } }, components: { TutList } } </script>Copy the code

Bind tut.title to title in the TutList component to slot, and then bind tut.category to the category property.

<template>
    <div v-for="tut in tuts" class="card" :key="tut.id">
        <slot :title="tut.title" :category="tut.category"></slot>
    </div>
</template>
Copy the code

You can then use the slotProps object of the Template in the TutList component to call the values of the properties on the slot.

<template> <div class="container"> <TutList> <template v-slot:default="slotProps"> <div class="card-header"> <div class="card-header-title">{{slotProps.title}}({{slotProps.category}})</div> </div> </template> </TutList> <TutList> <template v-slot:default="slotProps"> <div class="card-header"> <div class="card-header-title">{{slotProps.title}}</div>  </div> </template> </TutList> </div> </template>Copy the code

Think further

<template>
    <div class="container">
        <h1 class="title">Hello form Child</h1>
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name:'Child'
    }
</script>

<style scoped>

</style>
Copy the code
<template>

<div class="container">
  <Child>
    <button class="button" @click="clickOnBtn()">click Btn</button>
  </Child>
</div>
</template>

<script>
import Child from './components/slotdemo/Child.vue'
export default {
  
  name: 'App',
  data(){
    return {
      fontSize:10
    }
  },
  compontents:{
    Child
  },
  methods:{
    increment(){
      this.fontSize += 5
    },
    clickOnBtn(){
      alert("hello from parent")
    }
  }
}
</script>
Copy the code

The code above will give you some time to think about it. In fact, the contents of the Child tag should belong to the Child, not its parent component, but when we click the button, we can call the parent method.