插槽的使用

插槽的作用

为子组件传递一些模板片段，让子组件在它们的组件中渲染这些片段。

插槽的基本使用：

<!-- App.vue -->
<template>
  <div>
    <my-solt-cpn></my-solt-cpn>

    <!-- 插入了很多元素 -->
    <my-solt-cpn>
      <h2>哈哈哈</h2>
      <span>Span</span>
    </my-solt-cpn>
  </div>
</template>
<script>
  import MySoltCpn from "./MySlotCpn.vue";
  export default {
    components: {
      MySoltCpn,
    },
  };
</script>

<!-- MySoltCpn.vue -->
<template>
  <div>
    <h2>组件的开始-插槽</h2>
    <slot>
      <i>我是默认的 i 元素</i>
    </slot>
    <h2>组件的结束</h2>
  </div>
</template>

<script>
  export default {};
</script>

页面展示：

具名插槽的使用：

<!-- App.vue -->
<template>
  <div>
    <nav-bar :name="name">
      <template #left>
        <button>左边的按钮</button>
      </template>
      <template #center>
        <h4>我是标题</h4>
      </template>
      <template #right>
        <i>我是右边的 i 元素</i>
      </template>
      <template v-slot:[name]>
        <i>paomo</i>
      </template>
    </nav-bar>
  </div>
</template>

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

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

<!-- NavBar.vue -->
<template>
  <div class="nav-bar">
    <slot name="default"></slot>

    <div class="left">
      <slot name="left"></slot>
    </div>
    <div class="cenetr">
      <slot name="center"></slot>
    </div>
    <div class="right">
      <slot name="right"></slot>
    </div>
    <div class="addition">
      <slot :name="name"></slot>
    </div>
  </div>
</template>

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

<style scoped>
  .nav-bar {
    display: flex;
    height: 80px;
  }
  .left,
  .right,
  .addition {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    width: 120px;
    background-color: rgb(184, 20, 175);
  }
  .cenetr {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    flex: 1;
    background-color: lightcoral;
  }
</style>

页面展示：

作用域插槽的使用：

<!-- App.vue -->
<template>
  <div>
    <show-names :names="names">
      <template v-slot="slotProps">
        <button>{{ slotProps.item }}</button>
      </template>

      <!-- 带名字 -->
      <!-- <template v-slot:paomo="slotProps">
        <button>{{ slotProps.item }}</button>
      </template> -->
    </show-names>
  </div>

  <!-- 默认插槽简写  独占默认插槽 -->
  <show-names
    :names="names"
    v-slot="slotProps"
  >
    <button>{{ slotProps.item }}</button>
  </show-names>
</template>

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

  export default {
    components: {
      ChildCpn,
      ShowNames,
    },
    data() {
      return {
        names: ["aaa", "bbb", "ccc", "ddd"],
      };
    },
  };
</script>

<!-- ShowNames.vue -->
<template>
  <div>
    <template
      v-for="item in names"
      :key="item"
    >
      <slot :item="item"></slot>
      <!-- <slot
        name="paomo"
        :item="item"
      ></slot> -->
    </template>
  </div>
</template>

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

页面展示：