<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!-- 作用域插槽可以让我们在创建组件是给slot上添加一些数据 组件的使用者，可以根据对应组件去获取到组件的作者留在slot上的数据，并且做渲染或其他操作使用 创建组件 template: ` <div> <slot a="1" b="2"></slot> </div> ` 使用组件时 <组件名> <template slot-scope="自定义名字scope">{{scope.a}} {{scope.b}}</template> </组件名> 还可以使用解构赋值 <组件名> <template slot-scope="{a, b}">{{a}} {{b}}</template> </组件名> --> <div id="app"> <child :movies="movies"> <p slot-scope="o">{{o.movie}} {{o.$index}}</p> </child> </div> <script src="../vue.js"></script> <script> const child = { template: ` <div> <ul> <li v-for="(movie, index) in movies"> <slot :$index="index" :movie="movie"> {{movie}} </slot> </li> </ul> </div> `, props: { movies: Array } } const app = new Vue({ el: '#app', data: { movies: ['电影1', '电影2', '电影3'] }, components: { child } }) </script> </body> </html>