插槽位置
Vue.component('alert-box',{ template: ` <div> <strong>Error!</strong> <slot></slot> </div> ` })插槽内容
<alert-box>Something=happen</alert-box>Example1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div> <alert-box>有bug发生</alert-box> <alert-box>有一个警告</alert-box> <alert-box></alert-box> </div> <script type="text/javascript" src="http://www.likecs.com/js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: {}, methods: {} }) </script> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div> </div> <script type="text/javascript" src="http://www.likecs.com/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: {}, methods: {} }) </script> </body> </html> 具名插槽1. 插槽定义
<div> <header> <slot></slot> </header> <main> <slot></slot> </main> <footer> <slot></slot> </footer> </div>2.插槽内容
<base-layout> <h1 slot="header">标题内容</h1> <p>主要内容1</p> <p>主要内容2</p> <p slot="footer">底部内容</p> </base-layout>Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div> <base-layout> <p slot='header'>标题信息</p> <p>主要内容1</p> <p>主要内容2</p> <p slot='footer'>底部信息信息</p> </base-layout> <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="http://www.likecs.com/js/vue.js"></script> <script type="text/javascript"> /* 具名插槽 */ Vue.component('base-layout', { template: ` <div> <header> <slot></slot> </header> <main> <slot></slot> </main> <footer> <slot></slot> </footer> </div> ` }); var vm = new Vue({ el: '#app', data: {} }); </script> </body> </html> 作用域插槽 /* 应用场景: 父组件对子组件的内容进行加工处理 */Example
<ul> <li v-for="item in list" v-bind:key="item.id"> <slot v-bind:item="item"> {{ item.name }} </slot> </li> </ul>Example2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .current{ color: orange; } </style> </head> <body> <div> <fruit-list :list='list'> <template slot-scope="slotProps"> <strong v-if='slotProps.info.id==3'>{{ slotProps.info.name }}</strong> <span v-else>{{ slotProps.info.name }}</span> </template> </fruit-list> </div> <script type="text/javascript" src="http://www.likecs.com/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' } ] }, methods: {} }) </script> </body> </html> 购物车案例 需求分析 /* 根据业务功能进行组件化划分 1. 标题组件(展示文本) 2. 列表组件(列表展示,商品数量变更,商品删除) 3. 结算组件(计算商品总额) */ 功能实现步骤 /* 实现整体布局和样式效果 划分独立的功能组件 组合所有的子组件形成整体结构 逐个实现各个组件功能 标题组件 列表组件 结算组件 */