VUE组件通信的补充（slot）
1.最简单的slot
slot（插槽）最简单的用法就是当做父模板的备用内容。当父模板中没内容的时候，子模板中的<slot>***</slot>将会替代父模板的内容。来看个实例。
<!DOCTYPE html>
<html>
<body>
<div id="app">
<chlid-component>
<p>loren </p>
<p>loren </p>
</chlid-component>
</div>
</body>
<script src="./vue.js"></script>
<script>
Vue.component('chlid-component',{
template: `
<div>\
<slot>\
<p>如果父组件中没有内容，那么我将会替代它</p>
</slot>\
</div>`
});
var app = new Vue({
el: '#app'
})
</script>
</html>
此时的页面内容为：
如果，我们将父模板的内容注释掉；
<!DOCTYPE html>
<html>
<body>
<div id="app">
<chlid-component>
<!-- <p>loren </p>
<p>loren </p> -->
</chlid-component>
</div>
</body>
<script src="./vue.js"></script>
<script>
Vue.component('chlid-component',{
template: `
<div>\
<slot>\
<p>如果父组件中没有内容，那么我将会替代它</p>
</slot>\
</div>`
});
var app = new Vue({
el: '#app'
})
</script>
</html>
此时的页面内容为： 也能为slot指定一个name属性，这个时候，父模板中的内容，就能与子模板的slot绑定起来了。
2.作用域插槽
作用域插槽就是一种特殊的slot，使用一个可以复用的模板替换已渲染元素。来看一个具体的例子。
实际页面
这里的props就相当于是一个临时变量，有点像我们在执行v-for="item in items"里面的item.利用，这个props，我们可以访问到子组件里面的msg变量。注意，这里的scope="props'得写到template中，然后在子组件中插入一段带有<slot msg="~~"></slot>的标签。这样，就可以访问到子组件中的内容了。
来看一个作用域插槽slot 在列表组件中的运用。
最后输出的结果：