当定义完一个组件后，可能在使用时还需要往这个组件中插入新的元素或者文本。这个时候就可以使用插槽来完成。
- 在定义`template`时，在需要插入的地方使用`<slot></slot>`标识出来。在使用时只需将传递的值放在定义的组件标签包裹起来即可。
-
插槽可以设置默认值。在定义template时，用`slot`标签包裹起来即可，当没有传递值时就使用默认值，但传值后，则使用新的值。
-
当自定义组件中有多个插槽时，可以通过命名插槽来区分。如果没有指定名字，默认是有一个名字叫做 `default`
1）命名方法：在`slot`中添加`name`属性。如：`<slot name="name-1"></slot>`
2）使用方法：在组件标签下包裹中使用`<template v-slot="插槽名">插槽值</template>
4. 插槽当中的变量是从父组件的变量中读取的，而非从该组件中读取。也就是说：在插槽中使用`{{ }}` 定义的变量时，这个变量一定是在使用父组件的data中定义的。
5. 组件中的变量传给插槽：
1）把需要传递给插槽的变量绑定到`slot`上
2）在使用插槽的时候，指定名称后，加上一个名称，这个名称可以随便取，那么绑定到`slot` 上的所有属性都可以通过这个名称获得。
<template v-slot:header="headerDate"> {{headerDate.header_line}} </template>
3）如果只有一个插槽，并且这个插槽的名字是叫做default，那么就可以把属性定义放到组件上。
<Containter v-slot="data"> {{data.title}} </Containter>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <title>vue中插槽</title> </head> <body> <div id="app"> <nav-link url="https://www.baidu.com">百度</nav-link> 多插槽 <nav-link-2>百度 <template v-slot:slot2>谷歌</template> <template v-slot:slot3>搜狗</template> </nav-link-2> <nav-link-3> <template v-slot:header="headerDate"> {{headerDate.header_line}} </template> <template v-slot:footer="footerData"> <div> {{footerData.address}} </div> <div> {{footerData.aboutUs}} </div> </template> </nav-link-3> </div> <script> // 默认值 Vue.component('nav-link', { props: ['url'], template: ` <div> <nav><a :href="url"><slot>谷歌</slot></a></nav> </div> ` }) // 多插槽 Vue.component('nav-link-2', { template: ` <nav> <slot></slot><slot name="slot2"></slot><slot name="slot3"></slot> </nav> ` }) // 作用域 Vue.component('nav-link-3', { template: ` <div> <nav> <slot name="header" :header_line="headerLine"></slot> </nav> <footer> <slot name="footer" :address="address" :aboutUs="aboutUs"></slot> </footer> </div> `, data: function () { return { headerLine: ['百度', '谷歌'], 'address': "公司地址", 'aboutUs': "关于我们" } } }) new Vue({ el: "#app", data: { } }) </script> </body> </html>