vue-组件-插槽
目录
内容
1、组件插槽
-
组件插槽的作用:
- 父组件向子组件传值
-
组件插槽的基本用法
- 位置:组件内部
- 内容:任何页面元素
- 显示:父组件传值,显示传递的值;父组件不传值,显示默认内容;
-
示例1-1:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>04_slot</title> <script src="../assets/js/vue.js"></script> <style> .alert > span { color: red; } </style> </head> <body> <div id="app"> <alert-box>有一个BUG</alert-box> <alert-box>{{ msg }}</alert-box> <alert-box></alert-box> </div> <script> Vue.component('AlertBox', { template: ` <div class='alert'> <span>ERROR:</span> <slot>默认内容</slot> </div> ` }) const app = new Vue({ el: '#app', data: { msg: '有一个警告' } }); </script> </body> </html>
-
图示1-1:
2、具名插槽
具名插槽顾名思义,有name(名字)的插槽。
-
定义
<slot name="插槽名">默认内容</slot>
-
用法:见示例
-
示例2-1:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>05_slot-name</title> <script src="../assets/js/vue.js"></script> <style> *{ margin: 0; padding: 0; } .container { width: 200px; height: 200px; border: 1px solid #000; box-sizing: border-box; color: #000; } .container header { height: 25%; background-color: coral; text-align: center; } .container main { height: 50%; background-color: cyan; } .container footer { height: 25%; background-color: skyblue; } </style> </head> <body> <div id="app"> <base-layout> <h3 slot="header">标题内容1</h3> <p>主体内容1</p> <span slot="footer">底部信息1</span> </base-layout> <base-layout> <template slot="header"> <h3>标题内容2</h3> </template slot="header"> <p>主体内容2</p> <template slot="footer"> <p>底部信息2</p> </template> </base-layout> </div> <script> Vue.component('base-layout', { template: ` <div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer> </div> ` }) const app = new Vue({ el: '#app', data: { }, methods:{ } }); </script> </body> </html>
-
示例效果2-1:
3、作用域插槽
-
适用场景:父组件对子组件内容进行加工处理
-
定义:见示例
-
用法:见示例
-
示例3-1:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>06_slot-scope</title> <script src="../assets/js/vue.js"></script> <style> .current { font-weight: 400; color: orangered; } </style> </head> <body> <div id="app"> <data-list :datas="fruits"> <template slot-scope="scope"> <span :class="{current: (scope.item.id === 2 ? true: false)}"> {{ scope.item.name }}</span> </template> </data-list> </div> <script> Vue.component('data-list', { props: ['datas'], template: ` <div> <li v-for="data in datas" :key="data.id" > <slot :item="data">{{ data.name }}</slot> </li> </div> ` }) const app = new Vue({ el: '#app', data: { fruits: [ { id: 1, name: 'apple' }, { id: 2, name: 'orange' }, { id: 3, name: 'lemon' } ] }, methods:{ } }); </script> </body> </html>
-
效果图示3-1:
后记 :
vue官网地址:https://cn.vuejs.org/
本项目为参考某马视频开发,相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档,持续更新。欢迎交流,本人QQ:806797785
前端项目源代码地址:https://gitee.com/gaogzhen/vue
后端JAVA源代码地址:https://gitee.com/gaogzhen/JAVA