<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <headnav user='奥特曼'> <h2>欢迎来到尚学堂</h2> <h1 slot='header'>放置在头部的内容</h1> <h6 slot='footer'>放置在尾部的内容</h6> </headnav> </div> <script type="text/javascript"> Vue.component('headnav',{ template:`<div> <slot name='header'></slot> <h1>欢迎{{user}}</h1> <slot></slot> <slot name='footer'></slot> </div>`, props:['user'], data:function(){ return { msg:'headnav' } } }) var app = new Vue({ el:'#app', data:{ }, methods:{ } }) </script> </body> </html>