<!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>
浙公网安备 33010602011771号