组件间数据交互——组件插槽的作用||具名插槽用法|| 作用域插槽
生活随笔
收集整理的這篇文章主要介紹了
组件间数据交互——组件插槽的作用||具名插槽用法|| 作用域插槽
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
組件插槽的作用
組件插槽：父組件向子組件傳遞內(nèi)容
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="app"><alert-box>有bug發(fā)生</alert-box><alert-box>有一個(gè)警告</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>默認(rèn)內(nèi)容</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'>標(biāo)題信息</p><p>主要內(nèi)容1</p><p>主要內(nèi)容2</p><p slot='footer'>底部信息信息</p></base-layout> <hr><base-layout><template slot='header'><p>標(biāo)題信息1</p><p>標(biāo)題信息2</p></template><p>主要內(nèi)容1</p><p>主要內(nèi)容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>作用域插槽
應(yīng)用場景：父組件對子組件的內(nèi)容進(jìn)行加工處理?
<!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>總結(jié)
以上是生活随笔為你收集整理的组件间数据交互——组件插槽的作用||具名插槽用法|| 作用域插槽的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 组件间数据交互——父组件向子组件传值（
- 下一篇： 基于组件的案例：购物车