Vue，组件-组件的创建方式3(添加私有组件)

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>

效果图

posted on 2019-07-05 15:55  我1我1我1  阅读(647)  评论(0)    收藏  举报

导航