>[success] # 案例 ~~~ 1.在子组件定义时候帮我们将数据都循环好了知识，对具体是button 展示还是li展示做了预留，下面案例就是 父组件传值给子组件子组件通过作用域插槽将值帮我们循环好，然后在父组件时候只要一行就可以帮助将 整体内容按照格式显示出来 ~~~ * 父 ~~~html <template> <div> <show-names :names="names"> <template v-slot="slotProps"> <strong>{{ slotProps.item }}-{{ slotProps.index }}</strong> </template> </show-names> </div> </template> <script> import ShowNames from './ShowNames.vue' export default { components: { ShowNames, }, data() { return { names: ['why', 'kobe', 'james', 'curry'], } }, } </script> <style scoped></style> ~~~ * 子 ~~~html <template> <div> <template v-for="(item, index) in names"> <slot :item="item" :index="index"></slot> <slot name="aa"></slot> </template> </div> </template> <script> export default { props: { names: { type: Array, default: () => [], }, }, } </script> <style scoped></style> ~~~