Use of slots

During development, we often encapsulate reusable components: previously, we will pass some data to components through props for components to display; However, in order to make this component more universal, we cannot limit the content of the component to fixed div, span and other elements; For example, in some cases, we want the component to display a button, or in some cases, we use the component to display a picture; Therefore, we should let users decide what content and elements are stored in a certain area;

1. Basic use of slots

(1) There is a slot in one of our components. We can put the contents to be displayed in the slot;

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

(2) We use them in a component: we can insert ordinary content, html elements and component elements;

<template>
  <div>
    <my-slot-cpn>
      <!-- 1，Insert normal content -->
      I am an ordinary text
      <!-- 2，insert html element -->
      <button>I'm the button</button>
      <!-- 3，Insert component -->
      <my-button/>
    </my-slot-cpn>
  </div>
</template>

Default contents of slots

Sometimes when we want to use the slot, if the corresponding content is not inserted, we need to display a default content: of course, the default content will only be displayed when the inserted content is not provided;

<template>
  <div>
    <slot>
      <i>I am the default i element</i>
    </slot>
  </div>
</template>

2. Use of named slots

Parent component:

Attention shall be paid to:

(1) # is the syntax of v-slot:.

(2) Dynamic slot Name: allows the parent component to customize the name of the slot.

<template>
  <div>
    <!-- Allows the parent component to customize the name of the slot -->
    <nav-bar :name="name">
    <!-- #Is the syntax of v-slot: -- >
      <template #left>
        <button>Left button</button>
      </template>
      <template #center>
        <h2>I'm the title</h2>
      </template>
      <template #right>
        <i>dexter i element</i>
      </template>

      <!-- Allows the parent component to customize the name of the slot -->
      <template #[name]>
        <i>why content</i>
      </template>
    </nav-bar>
  </div>
</template>

<script>
  import NavBar from './NavBar.vue';

  export default {
    components: {
      NavBar
    },
    data() {
      return {
        name: "why"
      }
    }
  }
</script>

Subcomponents:

Note: receive the custom name passed from the parent component.

<template>
  <div class="nav-bar">
    <!-- <slot name="default"></slot> -->
    <div class="left">
      <slot name="left"></slot>
    </div>
    <div class="center">
      <slot name="center"></slot>
    </div>
    <div class="right">
      <slot name="right"></slot>
    </div>
      
    <div class="addition">
      <!-- Get the information passed from the parent component name -->
      <slot :name="name"></slot>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      name: String
    }
  }
</script>

3. Use of scope slots

First, understand the concept of rendering scope: all contents in the parent template are compiled in the parent scope; All contents in the sub template are compiled in the sub scope; This means that your parent component cannot access the data of the child component. However, sometimes we hope that the parent component can access the contents of the child component while using the slot, so vue provides us with a scope slot.

Let's take a look at the following case:

(1) On app Define data in Vue

(2) Passed to ShowNames component

(3) Traversing the ShowNames data in the ShowNames component

(4) Define the prop of the slot

(5) Get the props of the slot through v-slot:default

(6) Use item and index in slotProps

//Parent component
<template>
  <div>
    <show-names :names="names">
      <template v-slot="coderwhy">
        <button>{{coderwhy.item}}-{{coderwhy.index}}</button>
      </template>

      <template v-slot:why>
        <h2>I am why Insert of</h2>
      </template>
    </show-names>

    <show-names :names="names">
      <template v-slot="slotProps">
        <strong>{{slotProps.item}}-{{slotProps.index}}</strong>
      </template>
    </show-names>
  </div>
</template>

<script>
  import ShowNames from './ShowNames.vue';

  export default {
    components: {
      ShowNames
    },
    data() {
      return {
        names: ["why", "kobe", "james", "curry"]
      }
    }
  }
</script>

//Subcomponents
<template>
  <div>
    <template v-for="(item, index) in names" :key="item">
      <slot :item="item" :index="index"></slot>
    </template>
  </div>
</template>

<script>
  export default {
    props: {
      names: {
        type: Array,
        default: () => []
      }
    }
  }
</script