- 作用域插槽指的是父组件去替换插槽中的标签,而插槽中的内容由子组件显示。就是说,在父组件中以不同的标签以及形式显示子组件中的内容。
- 首先在slot标签中绑定某一属性,该属性的值即为要传递的数据。在本例中,要传递movies数组,所以在slot中绑定的data属性的值为movies。
- 在父组件中使用模板来调用传递的数据,添加v-slot指令,值为自定义的字符串。使用字符串.绑定的属性名,得到传递的数据对象,之后再进行相应的操作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作用域插槽</title>
</head>
<body>
<div id="app">
<cpn></cpn>
<cpn>
<template v-slot="slot">
<span v-for="item in slot.data">{{item}}~~</span>
</template>
</cpn>
<cpn>
<template v-slot="slot">
<span>{{slot.data.join('--')}}</span>
</template>
</cpn>
</div>
<template id="cpn">
<div>
<h2>作用域插槽的使用</h2>
<slot :data="movies">
<ul>
<li v-for="item in movies">{{item}}</li>
</ul>
</slot>
</div>
</template>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
components: {
cpn: {
template: '#cpn',
data() {
return {
movies: ['辛德勒的名单', '阿凡达', '霸王别姬', '星际迷航', '变形金刚']
}
}
}
}
})
</script>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ebaa3274f7a595ec2ffcd755edf88e15.png)