Vue作用域插槽的使用
- 作用域插槽是slot一个比较难理解的点，而官方文档有说的有点不清楚。
- 这里，我们用一句话对其做一个总结，
父组件替换插槽的标签，但是内容由子组件来提供。
- 我们先来看一个这样的要求：
- 子组件包括一组数据，比如：fruit:["苹果","橘子","香蕉","榴莲","橙子"]
- 需要在多个界面进行展示：1.某些界面是一水平方向进行展示的，2.某些界面以列表进行展示的，3.某些界面直接展示一个数组：
- 这个问题的关键点就是父组件如何获取到子组件的数据进行展示：
请看例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<cpn></cpn>
<cpn>
<!--在这里用一个template标签；并加上属性slot-scope="slot";然后用slot调用子组件模板的slot的属性data就-->
<!--会获得子组件的数据了；然后再按自己想的方式进行展示-->
<template slot-scope="slot">
<span v-for="item in slot.data">{{item}}----</span>
</template>
</cpn>
<cpn></cpn>
</div>
<template id="i1">
<div>
<!--给slot定义一个属性；将子组件的变量值赋给它-->
<slot :data="messages">
<ul>
<li v-for="item in messages">{{item}}</li>
</ul>
</slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"欢迎来到Vue"
},
components:{
cpn:{
template:"#i1",
data(){
return {
messages:["苹果","橘子","香蕉","榴莲","橙子"]
}
}
}
}
})
</script>
</body>
</html>
