插槽的使用
slot插槽可以理解为一个占位符，或者说是子组件暴露的一个让父组件传入自定义内容的接口。插槽内可以包含任何模板代码，包括 HTML，甚至其他的组件。
插槽的类型
- 默认插槽
<slot></slot>
- 具名插槽
<slot name="XXX"></slot>
- 作用域插槽
<slot v-slot:name="XXX"></slot>
插槽的使用
默认插槽
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <div id="app"> 11 <my-component> 12 你好 13 </my-component> 14 </div> 15 </body> 16 <script src="https://unpkg.com/vue/dist/vue.js"></script> 17 <script type="text/javascript"> 18 Vue.component('myComponent', { 19 template: '<div>Hello ！<slot></slot></div>' //slot标签被“你好”覆盖 20 }) 21 var vm = new Vue({ 22 el: '#app', 23 data() { 24 return {} 25 } 26 }) 27 </script> 28 </html>
具名插槽
具名插槽就是给slot标签加上 name 属性。
插入插槽的标签也需要使用对应的slot插入哪个插槽：slot="name"
语法：
<my-component><slot name="插槽名字"></slot></my-component>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <div id="app"> 11 <my-component> 12 <span slot="name">你好</span> 13 <span slot="time">2020-12-02</span> 14 </my-component> 15 </div> 16 </body> 17 <script src="https://unpkg.com/vue/dist/vue.js"></script> 18 <script type="text/javascript"> 19 Vue.component('myComponent', { 20 template: '<div>Hello ！<slot name="name"></slot> <slot name="time"></slot></div>' 21 }) 22 var vm = new Vue({ 23 el: '#app', 24 data() { 25 return {} 26 } 27 }) 28 </script> 29 </html>
作用域插槽
有时候，我们在父组件使用插槽时需要访问子组件中的数据，这时候就需要使用作用域插槽。用法：将 data 变量名 作为 <slot> 元素的一个 attribute 绑定上去：
需要配合 template 使用
1 <slot :自定义变量名="需要传入的数据"></slot> 2 <!-- 示例 --> 3 <slot :A="count"></slot> 4 ```， 5 在使用组件时，通过`v-slot:插槽名字="数据别名"`的方式使用。 6 ```html 7 <!-- 默认插槽中使用作用域插槽 --> 8 <my-component> 9 <template v-slot="slotProps"> 10 {{slotProps.A}} 11 </template> 12 </my-component> 13 14 <!-- 具名插槽中使用作用域插槽 --> 15 <my-component> 16 <template v-slot:插槽名字="slotProps"> 17 {{slotProps.A}} 18 </template> 19 </my-component>
在默认插槽中使用作用域插槽
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <div id="app"> 19 <my-component> 20 <!-- 默认插槽可以忽略v-slot后面的插槽名--> 21 <template v-slot="slotProps"> 22 <br /> 23 <!-- 使用 插槽数据--> 24 我叫：{{slotProps.det.name}}，我的爱好是：{{slotProps.det.love}} 25 </template> 26 </my-component> 27 </div> 28 </body> 29 <script src="https://unpkg.com/vue/dist/vue.js"></script> 30 <script type="text/javascript"> 31 Vue.component('myComponent', { 32 // 在默认插槽中传入数据 detail 33 template: '<div>Hello ！<slot :det="detail"></slot></div>', 34 data() { 35 return { 36 detail: { 37 name: '句号', 38 love: 'coding' 39 } 40 } 41 } 42 }) 43 var vm = new Vue({ 44 el: '#app', 45 data() { 46 return {} 47 } 48 }) 49 </script> 50 </html>
在具名插槽中使用作用域插槽
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <div id="app"> 11 <my-component> 12 <!-- 使用 v-slot 接收具名插槽 detail 的数据，并把它命名为 slotProps--> 13 <template v-slot:det="slotProps"> 14 <br /> 15 <!-- 使用 插槽 detail 的数据--> 16 我叫：{{slotProps.det.name}}，我的爱好是：{{slotProps.det.love}} 17 </template> 18 </my-component> 19 </div> 20 </body> 21 <script src="https://unpkg.com/vue/dist/vue.js"></script> 22 <script type="text/javascript"> 23 Vue.component('myComponent', { 24 // 定义具名插槽 detail 并传入数据 detail 25 template: '<div>Hello ！<slot :det="detail" name="det"></slot></div>', 26 data() { 27 return { 28 detail: { 29 name: '句号', 30 love: 'coding' 31 } 32 } 33 } 34 }) 35 var vm = new Vue({ 36 el: '#app', 37 data() { 38 return {} 39 } 40 }) 41 </script> 42 </html>
