vue---什么是组件

一、什么是组件

组件是Vue.js最强大的功能之，可以拓展HTML元素，封装可充用的代码，可以理解为自定义元素，所有的Vue组件同时也是Vue的实例。

二、创建组件

        1.  注册组件（componentName建议用小写并且包含一个短杠 eg“my-post”）

Vue.component(componentName, {
        // 选项
})

        2.  定义一个名为button-counter的新组件。（组建的data必须是一个Fn）

    Vue.component('button-counter', {
        data: function() {
            return {
                count: 0
            }
        },
        template: '<button v-on:click="count++">You clicked me {{count}}times.</button> '
    })

三、组件的调用

<div id="components-demo">
        <button-counter></button-counter>
</div>
<div id="component-demo">
        <button-counter></button-counter>
        <button-counter></button-counter>
        <button-counter></button-counter>
</div>

四、组件模板

        1. 每个组件只能有一个根元素

        2. 模板：template: 模板字符串；单文件组件(.vue)

五、全局组件

        使用Vue.component()注册的组件是全局组件

六、局部组件

    var ComponentA={/*...*/}
    var ComponentB={/*...*/}
    var ComponentC={/*...*/}
    new Vue({
        el: "#app",
        components:{
            'component-a':ComponentA,
            'component-b':ComponentB,
            'component-c':ComponentC
        }
    })