<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全局组件</title> </head> <body> <div id="app"> <father> <h1 slot="top">我是上面插槽</h1> <p slot="bottom">我在下面插槽</p> <p>我是没有命名的插槽</p> 没有命名的插槽存放其他所有 </father> </div> <template id="father"> <div> <slot name="top"></slot> 我是父组件 <slot name="bottom"></slot> <hr> <slot></slot> </div> </template> <script src="vue.js"></script> <script> Vue.component("father",{ template:"#father" }); new Vue({ el:"#app", data:{ } }); // 插槽的作用:可以自定义组件的部分内容 // 正常情况下:组件标签内部的内部不会被解析 // 如果需要被解析添加slot插槽,插槽相当于把标签内部的元素全部替换 // 如果想单个替换,需要给元素起一个名字。 // 例如:<div slot='top'></div> <slot name='top'></slot> //插槽会解析相同的名字 </script> </body> </html>
结果截图: