021_Vue插槽
1. 插槽
1.1. 父組件向子組件傳遞內容
1.2. 插槽位置??
Vue.component('alert-box', {template: `<div><strong>ERROR:</strong><slot>默認內容</slot></div>` });1.3. 插槽內容?
<div id="app"><alert-box>有bug發生</alert-box><alert-box>有一個警告</alert-box><alert-box></alert-box> </div>1.4. 代碼?
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>插槽</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="vue.min.js"></script><script type="text/javascript">// 組件插槽: 父組件向子組件傳遞內容Vue.component('alert-box', {template: `<div><strong>ERROR:</strong><slot>默認內容</slot></div>`});var vm = new Vue({el: "#app"});</script></body> </html>1.5. 效果圖
2. 具名插槽
2.1. 具名插槽用法
?2.2. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>具名插槽</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><!-- slot='header'使用在<template>標簽中, 就可以包括多個內容 --><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="vue.min.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"});</script></body> </html>2.3. 效果圖
3. 作用域插槽
3.1. 作用域插槽應用場景: 父組件對子組件的內容進行加工。
3.2. 作用域插槽用法
3.3.?代碼?
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>作用域插槽</title><style type="text/css">.current {font-weight: bold;color: green;}</style></head><body><div id="app"><book-list :list='books'><template slot-scope='slotProps'><span v-if='slotProps.index==3' class="current">{{slotProps.item}}</span><span v-else>{{slotProps.item}}</span></template></book-list></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">Vue.component('book-list', {props: ['list'],template: `<div><li :key='index' v-for='(item, index) in list'><slot :index='index' :item='item'></slot></li></div>`});var vm = new Vue({el: "#app",data: {books: ["JavaScript DOM編程藝術", "高性能JavaScript", "javascript高級程序設計", "JavaScript權威指南"]}});</script></body> </html>3.4.?效果圖
?
總結
- 上一篇： 020_Vue非父子组件之间数据交互
- 下一篇： 022_Vue购物车