局部组件注册方式 

 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     <title>Document</title>
 8     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
 9 </head>
10 
11 <body>
12     <div class="app">
13 
14         <t1></t1>
15         <t2></t2>
16         <t3></t3>
17     </div>
18     <script>
19         var testone = {
20             data: function () {
21                 return {
22                     msg: 'a'
23                 }
24 
25             },
26             template: '<div>{{msg}}</div>'
27         }
28         var testtwo = {
29             data: function () {
30                 return {
31                     msg: 'b'
32                 }
33             },
34             template: '<div>{{msg}}</div>'
35         }
36         var testthree = {
37             data: function () {
38                 return {
39                     msg: 'c'
40                 }
41             },
42             template: '<div>{{msg}}</div>'
43         }
44         var app = new Vue({
45             el: '.app',
46             data: {
47 
48             },
49             components: {
50                 't1': testone,
51                 't2': testtwo,
52                 't3': testthree,
53             }
54         })
55     </script>
56 </body>
57 
58 </html>

通过在vue实列中添加了components，进行局部模板。

posted @ 2021-01-22 15:27  小破的博客  阅读(93)  评论(0)  编辑  收藏  举报