1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport"
6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>02应用和组件</title>
9 <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
10 </head>
11 <body>
12 <div id = "app"></div>
13 <script>
14 // 创建根组件
15 let app = Vue.createApp({
16 // 根组件的灵魂
17 data() {
18 return {
19 name: '根组件-父亲',
20 };
21 },
22 // 根组件的外表
23 // 引用孩子组件
24 template:`<div>{{name}} - <hz/></div>`,
25 });
26
27 // 为根组件创建孩子
28 let feature = app.component("hz", {
29 // 孩子组件的灵魂
30 data() {
31 return {
32 name: '儿子',
33 };
34 },
35 // 孩子组件的外表
36 template:`<h2 style="background-color: red;color:white">{{name}}</h2>`,
37 });
38
39 // 挂载后返回的是根组件的实例
40 let vm = app.mount('#app');
41 console.log(vm.name); // 根组件-父亲
42
43 </script>
44 </body>
45 </html>
