當前位置：
首頁 >
组件间数据交互——组件插槽的作用||具名插槽用法|| 作用域插槽
發布時間：2025/4/16
41
豆豆
生活随笔
收集整理的這篇文章主要介紹了
组件间数据交互——组件插槽的作用||具名插槽用法|| 作用域插槽
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
組件插槽的作用
組件插槽：父組件向子組件傳遞內容
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="app"><alert-box>有bug發生</alert-box><alert-box>有一個警告</alert-box><alert-box></alert-box></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">Vue.component('alert-box', {template: `<div><strong>ERROR:</strong><slot>默認內容</slot></div>`});var vm = new Vue({el: '#app',data: {}});</script> </body> </html>具名插槽用法
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="app"><base-layout><p slot='header'>標題信息</p><p>主要內容1</p><p>主要內容2</p><p slot='footer'>底部信息信息</p></base-layout> <hr><base-layout><template slot='header'><p>標題信息1</p><p>標題信息2</p></template><p>主要內容1</p><p>主要內容2</p><template slot='footer'><p>底部信息信息1</p><p>底部信息信息2</p></template></base-layout></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*具名插槽*/Vue.component('base-layout', {template: `<div><header><slot name='header'></slot></header><main><slot></slot></main><footer><slot name='footer'></slot></footer></div>`});var vm = new Vue({el: '#app',data: {}});</script> </body> </html>作用域插槽
應用場景：父組件對子組件的內容進行加工處理?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <style type="text/css">.current {color: orange;} </style> <body><div id="app"><fruit-list :list='list'><template slot-scope='slotProps'><strong v-if='slotProps.info.id==3' class="current">{{slotProps.info.name}}</strong><span v-else>{{slotProps.info.name}}</span></template></fruit-list></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*作用域插槽*/Vue.component('fruit-list', {props: ['list'],template: `<div><li :key='item.id' v-for='item in list'><slot :info='item'>{{item.name}}</slot></li></div>`});var vm = new Vue({el: '#app',data: {list: [{id: 1,name: 'apple'},{id: 2,name: 'orange'},{id: 3,name: 'banana'}]}});</script> </body> </html>總結
以上是生活随笔為你收集整理的组件间数据交互——组件插槽的作用||具名插槽用法|| 作用域插槽的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 组件间数据交互——父组件向子组件传值（
- 下一篇： 基于组件的案例：购物车