全局组件与局部组件

vant组件库官方中文网地址

1. 组件之间都是互相隔离的，定义data下属性也是分别在各自的组件里定义。
2. 和根组件不同，全局组件和局部组件定义data，都采用下面这种方式。
3. 除了data使用和在根组件下有所不同之外，其他所有选项，例如methods，computed等等都和在根组件里使用方法一致。

Vue.component("kerwinHeader",{
     template:`
         <section style="background:yellow;">
             页面的导航栏部分-{{myname}}
         </section>            
     `,
     //data必须是一个函数
     data(){
         return {
             myname:"导航栏组件"
         }
     }
 })

全局组件

1. 全局组件定义使用==Vue.component()==方法。在js全局作用域下进行定义，即在script标签下/某个js文件下
2. 全局组件可以定义多个，在页面任何地方都可以使用该组件。例如下面的child组件，kerwinHeader组件
3. 页面引用组件是通过组件名字，确保名字书写没问题。否则页面报错。例如 kerwinHeader && kerwin-header

<div id="box">
    <kerwin-header></kerwin-header>
</div>

Vue.component("kerwinHeader",{
    template:`
<section style="background:yellow;">
页面的导航栏部分
<button>right</button>
<child></child>
</section>
`,
    methods:{
    }
})

Vue.component("child",{
    template:`<div>child</div>`
})

局部组件

1. 局部组件定义在vue组件里，使用components属性
2. html页面上使用局部组件时，也必须放到定义的那个组件下。例如：kerwin-tabbar-a组件，kerwin-tabbar-b组件

Vue.component("kerwin-tabbar",{
    template:`
        <div style="background:red;">
        tabbar    
        <kerwin-tabbar-a></kerwin-tabbar-a>
        <kerwin-tabbar-b></kerwin-tabbar-b>
        <child></child>
        </div>
        `,
    //局部组件    
    components:{
        "kerwin-tabbar-a":{
            template:`<div>kerwin-tabbar-a</div>`
        },
        "kerwin-tabbar-b":{
            template:`<div>kerwin-tabbar-b</div>`
        }
    }
})