Vue3.0之作用域插槽的使用

创建一个ShowNames.vue

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

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

然后使用

<template>
  <div>
    <!-- 注意: 如果还有其他的具名插槽, 那么默认插槽也必须使用template来编写 -->
    <show-names :names="names">
      <template v-slot="coderwhy">
        <button>{{ coderwhy.item }}-{{ coderwhy.index }}</button>
      </template>

      <template v-slot:lsh>
        <h2>我是lsh的插入内容</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 "./components/ShowNames.vue";

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