a.默认插槽
组件中留出插槽位置，在父组件中加入内容。组件的插槽是将slot标签放在预留位置，供父组件填充。
b.具名插槽
通标签写好标题，这个是必展示的。使用slot中加入name属性写可选的标签内容，如果父组件有则显示没有不显示。
c.作用域插槽
我们将信息这一栏也写成slot标签，通过绑定动态值传给父组件，实现动态展示内容。
父组件使用slot-scope接收子组件传来的值。这里注意子组件可以绑定多个值，最后传到父组件时是这些值的集合，可以使用解构方式获取，也可以定义变量接收整个对象集合。
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
<!-- 引入vue -->
<script src="js/vue.js"></script>
</head>
<body>
<!-- vue操作的容器 -->
<div id="app">
父组件<br>
------------
<Child >
<div style="background: rgb(191, 192, 191);">
<span>返回</span>
<span>信息</span>
<span>帮助</span>
</div>
</Child>
-------------
<Child1>
<template slot='left'>
<span>返回</span>
</template>
</Child1>
-------------
<Child2 :title='title'>
<!-- 子组件上可以绑定多个参数，最后封装成一个对象使用slot-scope接收 -->
<template slot-scope='data'>
<div>
<span>{{data.title}}</span>
</div>
</template>
<!-- 解构形式 -->
<!-- <template slot-scope='{title}'>
<div>
<span>{{title}}</span>
</div>
</template> -->
</Child2>
</div>
<script>
// 默认插槽
const Child = {
template: `
<div>
子组件默认插槽
<slot></slot>
</div>`,
}
// 具名插槽
const Child1 = {
template: `
<div>
子组件1具名插槽
<div style="background: rgb(137, 236, 137);">
<slot name="left"></slot>
<span>信息</span>
<slot name="right"></slot>
</div>
</div>`,
}
// 作用域插槽
const Child2 = {
template: `
<div>
子组件2作用域插槽
<slot name="left"></slot>
<slot :title="title"></slot>
<slot name="right"></slot>
</div>`,
props: ['title']
}
new Vue({
el: '#app', // 指定当前vue实例为那个容器服务
data: { // 存储数据
title: '新闻'
},
components:{ // 注册组件
Child,
Child1,
Child2
},
})
</script>
</body>
</html>
