組件就是定義html中不存在的標簽

一、全局定義組件

<div id="app">
    <h1>{{msg}}</h1>
    <zujian></zujian>
</div>
<script>
    Vue.component('zujian',{
        template:`<h2>全局組件</h2>`
    });
    var app=new Vue({
        el:"#app",
        data:{
            msg:"HelloWorld"
        }
    })
</script>

即使定義全局的組件，也要放在vue的作用域內(nèi)才管用。

二、局部組件（在構造器里面定義）

<script>
    Vue.component('zujian',{
        template:`<h2>全局組件</h2>`
    });
    var app=new Vue({
        el:"#app",
        data:{
            msg:"HelloWorld"
        },
       components:{
           "com1":{
               template:`<h2>局部組件</h2>`
           } 
       }
    })
</script>

image.png

局部組件要在定義組件的作用域里進行使用，其他作用域使用無效。

<div id="app">
    <h1>{{msg}}</h1>
    <zujian></zujian>
    <com1></com1>
</div>
<div class="app">
    <com1></com1>
</div>
<script>
    Vue.component('zujian',{
        template:`<h2>全局組件</h2>`
    });
    var app=new Vue({
        el:"#app",
        data:{
            msg:"HelloWorld"
        }
    })
    var app1=new Vue({
        el:'.app',
        components:{
            "com1":{
                template:`<h2>局部組件1</h2>`
            }
        }
    })

在#app作用域內(nèi)使用com1無效

image.png

三、指令和組件的區(qū)別

指令：指令是綁定在標簽上的屬性
組件：定義的是標簽，組件里面可以定義屬性