<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实例方法</title> <meta name="flexible" content="initial-dpr=2,maximum-dpr=3" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta content="yes" name="apple-touch-fullscreen"> <meta content="telephone=no,email=no" name="format-detection"> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> <script src="../assets/js/flexible_css.js"></script> <script src="../assets/js/flexible.js"></script> <script src="../assets/js/jquery-3.2.1.js"></script> <script src="../assets/js/vue.js"></script> </head> <body> <div id="app"> <caicai> <span slot="url">{{caiData.url}}</span> <!-- 在组件标签里传递值--> <span slot="netName">{{caiData.netName}}</span> <span slot="skill">{{caiData.skill}}</span> </caicai> </div> <template id="tep"> <div> <p>地址：<slot name="url"></slot></p> <!--在模版里 用slot 标签接收值--> <p>网名：<slot name="netName"></slot></p> <p>技术类型：<slot name="skill"></slot></p> </div> </template> </body> <script type="text/javascript"> var jinsuo={ //组件模版变量 template:"#tep" //模版 定义在 id为tep 的html的tempalte标签里 } var app=new Vue({ el:"#app", data:{ caiData:{ // 数据对象 url:"http://baidu.com", netName:"菜菜", skill:"web前端" } }, components:{ //组件 "caicai":jinsuo //caicai 组件名 jinsuo 是组件模版 } }) </script> </html>