Component 组件（14）

组件就是定义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的作用域内才管用。

二、局部组件（在构造器里面定义）

<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作用域内使用com1无效

image.png

三、指令和组件的区别

指令：指令是绑定在标签上的属性
组件：定义的是标签，组件里面可以定义属性