技术QQ交流群:294088839
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue 内置组件 -slot讲解</title> <script type="text/javascript" src="../assets/js/vue.js"></script> </head> <body> <h1>Vue 内置组件 -slot讲解</h1> <hr> <div id="app"> <whl> <span slot="bolgUlr">{{whlData.bolgUlr}}</span> <span slot="netName">{{whlData.netName}}</span> <span slot="skill">{{whlData.skill}}</span> </whl> </div> <template id="tep"> <!--vue 模板 必须有个大的容器包含着 才能显示完整--> <div> <p>博客地址: <slot name="bolgUlr"></slot> </p> <p>网名:<slot name="netName"></slot></p> <p>所会技术:<slot name="skill"></slot></p> </div> </template> </body> </html> <script> var whl={ template:"#tep" } var app = new Vue({ el:'#app', data:{ whlData:{ bolgUlr:'https://blog.csdn.net/drug_', netName:'whl', skill:'web前端' } }, components:{ 'whl':whl, } }) </script>