>[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> ~~~