Vue：插槽属性prop的使用示例

<template>
  <div class="">
    <span v-for="item in list">
      <slot v-bind="item">{{item.name}}</slot>
    </span>
  </div>
</template>
<script>
export default {
  name: 'Child',
  props: {
    list: { type: Array },
  },
};
</script>
<style lang="scss" scoped>
</style>

<template>
  <div class="app">
    <!-- 使用默认 -->
    <Child :list="list" />
    <!-- 使用插槽 prop -->
    <Child :list="list">
      <template v-slot="item">
        {{item.name}}-{{item.age}}
      </template>
    </Child>
    <!-- 解构插槽 Prop -->
    <Child :list="list">
      <template v-slot="{age}">{{age}}</template>
    </Child>
  </div>
</template>
<script>
import Child from './Child.vue';
export default {
  name: 'App',
  components: { Child },
  data() {
    return {
      list: [
        { name: 'Tom', age: 23 },
        { name: 'Jack', age: 24 },
        { name: 'Steve', age: 25 },
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
</style>

TomJackSteve
Tom-23 Jack-24 Steve-25
232425