什么是slot(插槽)
为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过
程被称为 内容分发.Vue.js 实现了一个内容分发 API，使用特殊的 ‘slot’ 元素作为原始内容的
插槽。
编译的作用域
在深入内容分发 API 之前，我们先明确内容在哪个作用域里编译。假定模板为：
<child-component>
{{ message }}
</child-component>
message 应该绑定到父组件的数据，还是绑定到子组件的数据？
答案是父组件。
组件作用域简单地说是：
- 父组件模板的内容在父组件作用域内编译；
- 子组件模板的内容在子组件作用域内编译。
插槽的用法:
- 父组件的内容与子组件相混合，从而弥补了视图的不足
- 混合父组件的内容与子组件自己的模板
单个插槽
<div id="app">
<child-component>
<p>来自父组件的问候</p> // 这看似是在子组件中写的内容，但其实这是属于父组件的作用域
</child-component> // 也就是说，其实这个 p元素 ，是父组件中的内容
</div>
Vue.component('child-component', {
template: `<div>
<slot></slot>
</div>`
})
var app = new Vue({
el: '#app',
data: {}
})
在子组件中使用 slot 做一个插槽，父组件中的内容就可以插到这个插槽里边。
具名插槽
具名插槽，就是有名字的插槽。
如果父组件中有很多内容都要放到子组件中，如果子组件中只有一个 slot（插槽）的话，那所有内容都挤到一起，显然是不合理的。所以我们需要多个 slot（插槽），并给每个 slot（插槽）起个名字，那么就能很方便的讲指定内容放到指定 slot（插槽）中。
<div id="app">
具名插槽：
<name-component>
<h3 slot="header">我是标题</h3>
<p>我是正文内容</p>
<p>正文内容有两段</p>
<p slot="footer">我是底部信息</p>
</name-component>
</div>
<!-- slot 将 p 标签的内容作为插值替换到 slot 标签里面 -->
<script>
Vue.component('my-component', {
template: '<div>
<slot>
如果父组件没有插入内容,我就作为默认出现\
</slot>
</div>'
})
Vue.component('name-component', {
template: ' <div>
<div class="header">
<slot name="header"> </slot>
</div>
<div class="contatiner">
<slot></slot>
</div>
<div class="footer">
<slot name="footer"></slot>
</div>
</div>'
})
var app = new Vue({
el: '#app',
data: {
}
})
</script>
作用域插槽
上面说的单个插槽和具名插槽，都是父组件向子组件传递数据。那么，父组件要从子组件中获取数据，怎么办呢？同样，使用 slot 就可以办到。
<div id="app">
<my-component>
<!-- template 模板是不会被渲染的 template里面的内容会渲染 -->
<template slot="a" slot-scope="prop">
{{prop.text}} <br>
{{prop.ss}}
<!-- {{prop.name}}//拿不到name属性 -->
</template>
<!-- 2.50版本之前只能在 template 上使用作用域插值
2.50 以后任意标签都可以 -->
<!-- <p slot="a" slot-scope="prop">
{{prop.text}} <br>
{{prop.ss}}
</p> -->
</my-component>
</div>
Vue.component('my-component', {
template:'<div>\
<slot name="a" text="我是子组件的数据" ss="ddfdf"></slot></div>'
})
var app = new Vue({
el:'#app',
data:{
}
})
子组件中的 text，就是子组件中的数据。父组件是怎么获取的？在 template 上写了 slot-scope 属性，scope 有“范围”的意思，也就是 slot 的范围，也就是“作用域插槽”了
访问插槽
访问插槽，要用到 this.$slots
<div id="app">
具名插槽：
<name-component>
<h3 slot="header">我是标题</h3>
<p>我是正文内容</p>
<p>正文内容有两段</p>
<p slot="footer">我是底部信息</p>
</name-component>
</div>
Vue.component('my-component', {
template: '<div>
<slot>
如果父组件没有插入内容,我就作为默认出现\
</slot>
</div>'
})
Vue.component('name-component', {
template: ' <div>
<div class="header">
<slot name="header"> </slot>
</div>
<div class="contatiner">
<slot></slot>
</div>
<div class="footer">
<slot name="footer"></slot>
</div>
</div>'
})
mounted:function() {
//访问插槽
var header = this.$slots.header; // 访问名字为 header 的插槽
var text = header[0].elm.innerText // header 中的元素的文本
var html = header[0].elm.innerHTML
console.log(header)
console.log(text)
console.log(html)
}
})
var app = new Vue({
el: '#app',
data: {
}
})
