初识组件

发表于 | 分类于 | 评论数：

组件实际上就是创建html不存在的标签，非常常用

注册全局组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
    <div id="app">
        <are></are><!--只能在vue实例化里用-->
    </div>
    <div id="pp">
            <are></are>
    </div>
    <script>
        Vue.component('are',{
            template:`<h2>我们</h2>`
        })
        //不论构造器里有没有数据都要写这样才算实例化成功
        var app = new Vue({
            el:'#app',
            data:{
               }
            })
        var pp = new Vue({
            el:'#pp',
            data:{
               }
            })
     </script>
</body>

结果：都能用组件

注册局部组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<body>
    <div id="app">
        <are></are>
    </div>
    <div id="pp">
            <are></are>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
               },
            components:{
               //注意引号
                'are':{
                    template:`<h2>hello</h2>`
                   }
            }
        })
        var pp = new Vue({
            el:'#pp',
            data:{
               }
            })
     </script>
</body>

结果：只有第一个才能用组件

-------------本文结束感谢您的阅读-------------