Vue,组件-组件的创建方式3(添加私有组件)
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script src="../js/vue.js"></script>
9 </head>
10 <body>
11 <div id="app">
12 <mycom3></mycom3>
13 </div>
14
15 <div id="app1">
16 <mycom3></mycom3>
17 <login></login>
18 </div>
19
20 <!-- 在 被控制的 #app 外面, 使用 template 元素, 定义组件的HTML模板结构 -->
21 <template id="tmpl">
22 <div>
23 <h1>这是通过 template 元素, 在外部定义的组件结构, 这个方式, 有代码的智能提示和高亮</h1>
24 <h4>好用,不错!</h4>
25 </div>
26 </template>
27
28 <template id="tmpl2">
29 <div>
30 <h1> 这是私有的 login 组件 </h1>
31 </div>
32 </template>
33 </body>
34 </html>
35 <script>
36
37 Vue.component('mycom3', {
38 template: '#tmpl'
39 })
40
41 var vm = new Vue({
42 el: '#app',
43 data:{},
44 method:{}
45 })
46
47 var vm2 = new Vue({
48 el:'#app1',
49 data:{},
50 methods: {},
51 filters: {},
52 directives: {},
53 components: { // 定义实例内部私有组件的
54 login:{
55 // template: '<h1> 这是私有的 login组件 </h1>'
56 template: '#tmpl2'
57 }
58 },
59
60 beforeCreate() {},
61 created() {},
62 beforeMount() {},
63 mounted() {},
64 beforeUpdate() {},
65 updated() {},
66 beforeDestroy() {},
67 destroyed () {}
68
69 })
70 </script>
效果图
![](https://img2018.cnblogs.com/blog/1709882/201907/1709882-20190705155512757-1659796242.png)