<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件的嵌套</title> <script type="text/javascript" src="../vue.js"></script> </head> <body> <div id="root"> </div> <script type="text/javascript"> Vue.config.productionTip = false // 组织开发环境提示 // 创建student组件 const student = Vue.extend({ template: ` <div> <h2>学生姓名:{{ studentName }}</h2> <h2>学生年龄:{{ age }}</h2> </div> `, data() { return { studentName: '小强', age: 18, } } }) // 创建school组件 const school = Vue.extend({ name: 'myschool', template: ` <div> <h2>学校名称:{{ schoolName }}</h2> <h2>学校地址:{{ address }}</h2> <student></student> </div> `, data() { return { schoolName: '修仙学院', address: '长白山' } }, components: { student, } }) // 创建Hello组件 const hello = Vue.extend({ template: ` <div> <h1> {{ hellomsg }} </h1> </div>`, data() { return { hellomsg: "Hello, 您好" } } }) // app组件 const app = Vue.extend({ template: ` <div> <hello></hello> <school></school> </div> `, components: { school, hello } }) // 创建Vue实例 const vm = new Vue({ el: '#root', template: `<app></app>`, data: { msg: '欢迎来到修仙世界!' }, components: { app } }) </script> </body> </html>