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>

 

原文地址：http://www.cnblogs.com/LiuChang-blog/p/16794185.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性