学习笔记
1.通过<slot><slot>标签写在 组件里面 就能继承 组件占位符里面的内容，元素
2.可以给 占位符里面的 元素设置 属性 slot=" aa " ， 在组件里面设置 插槽 标签<slot name="aa"></slot> , 可以接收对应传值
3.可以在 组件里面的插槽<slot ><slot> （可以通过父传子的方式，添加一个属性把值传给，占位符里面的内容，元素） 。在占位符里面的元素，添加 属性 slot-scope=“值” （值和父集传过来的值一样）
<body>
<!-- //引入vue.js -->
<script type='text/javascript' src='js/vue.js'></script>
<div id='app'>
{{msg}}
<!-- // lis = list 是传数据给子集 -->
<son :lis=list>
<!-- //通过 slot-scope属性 接收值 -->
<div slot-scope="aa">
<div>{{aa.l.name}}</div>
</div>
</son>
</div>
<!-- //js代码 -->
<script type='text/javascript'>
//son组件内容
var son = {
// 通过props 接收 父集传的 lis数组
props: ['lis'],
//模板 循环 lis数组 ，通过slot标签传给子集 每次循环的 循环项
// （slot是可以接收son标签里面内容的，如果不写，son里面的内容会被替换掉）
template: `<div>{{s}}
<p :key="item.id" v-for="item,index in lis" > <slot :l="item" ></slot></p></div>`,
data() {
return {
s: '我是son'
}
},
}
//vue实例
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue',
//list数据
list: [{
id: 1,
name: '张三',
age: 18
}, {
id: 2,
name: '李四',
age: 19
}, {
id: 3,
name: '王五',
age: 20
}, ]
},
//创建son组件
components: {
son,
}
});
</script>
</body>
