02应用和组件

 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>