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

插槽属性prop的使用示例

文档：https://cn.vuejs.org/v2/guide/components-slots.html

子组件

<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