子组件
<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