第六章组件 55 组件-使用components定义私有组件

Vue组件与模板详解

最新推荐文章于 2025-09-04 18:55:33 发布

335046781

最新推荐文章于 2025-09-04 18:55:33 发布

阅读量90

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/songsongblue/p/10997996.html

本文详细介绍了如何在Vue中定义和使用组件，包括组件的HTML模板结构定义，以及如何通过template元素在外部定义组件结构，实现代码的智能提示和高亮。同时，展示了如何创建Vue实例，并定义实例内部私有组件。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4   <head>
 5     <meta charset="utf-8">
 6     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible"  content="ie=edge">
 8     <title>Document</title>
 9     <!--1.导入Vue的包-->
10     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>   
11   </head>
12 
13   <body>
14       <div id="app">
15       <mycom3></mycom3>
16       </div>
17 
18       <div id="app2">
19       <mycom3></mycom3>
20       <login></login>
21     </div>
22 
23   
24   <!-- 在 被控制的 #app 外面，使用 template 元素，定义组件的HTML模板结构 -->
25   <template id="tmp1">
26     <div>
27       <h1>这是通过template 元素，在外部定义的组件结构，这个方式，有代码的智能提示和高亮</h1>
28       <h4>好用，不错！</h4>
29     </div>
30   </template>
31 
32   <template id="temp12">
33     <h1>这是私有的 login 组件</h1>
34   </template>
35 
36       <script>
37         Vue.component('mycom3',{
38           template:'#tmp1'
39         })
40 
41           //创建 Vue 实例，得到 ViewModel
42           var vm =  new Vue({
43               el:'#app',
44         data:{
45           msg:''
46         },
47         methods:{}
48           });
49 
50         var vm2 =  new Vue({
51           el:'#app2',
52           data:{
53           msg:''
54         },
55         methods:{},
56         components:{//定义实例内部私有组件的
57           login:{
58             template:'#temp12'
59           }
60         },
61         })
62       
63 
64       </script>
65   </body>
66 </html>