Vue笔记(四):插槽(slot)(Vue notes (IV): slot)

时间:2022/01/15

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

————————

Time: January 15, 2022

Time: January 15, 2022

The slot is used to decide to insert the carried content into a specified location, so as to make the template block, which has the characteristics of modularity and greater reusability.

Example code:

 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>

In the above code, the content in todo’s template can only be written on one line without a backslash. However, in order to improve the readability of the code and prevent problems in the code, you need to add a backslash after each line break to escape. In addition, when using a slot, you should pay attention to binding the slot to the corresponding component through the name attribute.