时间：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进行绑定。