时间：2022/01/15
插槽（Slot）用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。
示例代码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 </head>
9 <body>
10
11 <div id="app">
12
13 <todo>
14 <todo-title slot="todo-title" v-bind:title="title"></todo-title>
15 <todo-list slot="todo-list" v-for="item in items" v-bind:list="item"></todo-list>
16 </todo>
17
18 </div>
19
20 <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
21
22 <script>
23
24 Vue.component("todo",{
25 template:'<div>\
26 <slot name="todo-title"></slot>\
27 <ul>\
28 <slot name="todo-list"></slot>\
29 </ul>\
30 </div>'
31 });
32
33 Vue.component("todo-title",{
34 props: ["title"],
35 template:'<div>{{title}}</div>'
36 });
37
38 Vue.component("todo-list",{
39 props: ["list"],
40 template:'<li>{{list}}</li>'
41 });
42
43 var vm = new Vue({
44 el: "#app",
45 data: {
46 title: "图书列表",
47 items: ["Java", "Python", "Linux"]
48 }
49 });
50
51 </script>
52
53
54 </body>
55 </html>
在上面的代码中，todo的template中的内容如果不加反斜杠，那么只能写在一行中，但是为了提高代码的可读性，又要使代码不出问题，就需要在每次换行的后面加上一个反斜杠来转义。除此之外，在使用slot时要注意通过name属性来将slot和对应的component进行绑定。