1.插槽的概念：
插槽是子组件给父组件提供的占位符，用<slot></slot>来表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签
匿名插槽
代码如下：
HelloWorld为子组件
父组件如下：
当我们没给子组件定义插槽时，父组件里面的‘123’，无法在浏览器显示出来如下图所示：
当我们给子组件定义一个插槽时
父组件里面的123就会在浏览器里面显示出来
插槽使用 - 具名插槽：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<body>
<div id="app">
<base-layout>
<!-- 2、 通过 slot 属性来指定, 这个 slot 的值必须和下面 slot 组件的 name 值对应上，如果没有匹配到 则放到匿名的插槽中 -->
<p slot='header'>标题信息</p>
<p>主要内容1</p>4
<p>主要内容2</p>
<p slot='footer'>底部信息信息</p>
</base-layout>
<base-layout>
<!-- 注意点：template临时的包裹标签最终不会渲染到页面上 -->
<!-- <template slot='header'> -->
<template v-slot:header>
<p>标题信息1</p>
<p>标题信息2</p>
</template>
<p>主要内容1</p>
<p>主要内容2</p>
<template slot='footer'>
<p>底部信息信息1</p>
<p>底部信息信息2</p>
</template>
</base-layout>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 1、使用 <slot> 中的 "name" 属性绑定元素 指定当前插槽的名字
Vue.component('base-layout', {
template: `
<div>
<header>
<slot name='header'></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name='footer'></slot>
</footer>
</div>
`
});
const vm = new Vue({
el: '#app',
});
</script>
</body>
</html>
作用域插槽
- 父组件对子组件加工处理
- 既可以复用子组件的 slot，又可以使 slot 内容不一致
原理：通过在子组件的<slot></slot>来自定义属性向父组件传值，父组件通过<template slot-scope='接受数据'></template>
来实现对子组件的数据进行加工
