⑦. 匿名插槽
- ①. slot接收父组件开始与闭合中间的内容
- ②. 使用该组件时：组件标签中间写的内容会传递到中
- ③. 如果没有传递内容：solt中可自定义内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <!-- slot接收父组件开始与闭合中间的内容、 使用该组件时：组件标签中间写的内容会传递到中 如果没有传递内容：solt中可自定义内容 --> <body> <div id="app"> <!-- 这里的所有组件标签中嵌套的内容会替换掉slot,如果不传值则使用slot中的默认值(slot接收父组件开始与闭合中间的内容) --> <alert-box>出现bug了</alert-box> <!-- 使用该组件时:组件标签中间写的内容会传递到中 --> <alert-box>出现了一个警告</alert-box> <!-- 如果没有传递内容:solt中可自定义内容 --> <alert-box></alert-box> </div> <script src="../js/vue.js"></script> <script> Vue.component('alert-box', { //当组件渲染的时候，这个 <slot> 元素将会被替换为"组件标签中嵌套的内容" //插槽内可以包含任何模板代码，包括 HTML template: ` <div> <span>ERROR</span> <slot>默认内容</slot> </div> ` }); var vm = new Vue({ el: '#app', data: { } }); </script> </body> </html>
⑧. 具名插槽
- ①. 具有名字的插槽,使用中的"name"属性绑定元素
<div id="app"> <base-layout> <!-- 2、 通过slot属性来指定, 这个slot的值必须和下面slot组件得name值对应上 如果没有匹配到 则放到匿名的插槽中 --> <p slot='header'>标题信息</p> <p>主要内容1</p> <p>主要内容2</p> <p slot='footer'>底部信息信息</p> </base-layout> <base-layout> <!-- 注意点：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="js/vue.js"></script> <script type="text/javascript"> /* 具名插槽 */ Vue.component('base-layout', { template: ` <div> <header> ### 1、 使用 <slot> 中的 "name" 属性绑定元素 指定当前插槽的名字 <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>
