<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>component父子组件</title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="app"> <cai> </cai> </div> </body> <script type="text/javascript"> var city={ template:`<div style="color:green">我叫蔡金锁</div>` } var caiComponents={ template:`<div style="color:red;font-size:30px;"> <p>我来自辽宁</p> <caicity></caicity> </div>`, // 在父组件里的子组件 components:{ // 定义组件 'caicity':city // 子组件 组件名：caicity 组件模版：city } } new Vue({ el:"#app", data:{ }, components:{ //定义局部组件 "cai":caiComponents, //组件名字 cai 组件内容caiComponents 在外面定义 } }) </script> </html>