Vue的component组件

定义：组件是可复用的Vue实例，且带有一个名字

组件的 特点 :1、组件体现封装思想（ html/css/js ）

                      2、组件是特殊的Vue实例

                                2.1 组件可以使用Vue选项（ 没有el ）

                                2.2 有自己的选项 template(要求有一个根元素)

                      3、组件中的data要求必须是一个函数 且需要返回一个对象 data(){return {数据a:值}}

                      4、尽可能使用第三方组件，如 element-ui 等

注册组件

                注册组件分为全局注册和局部注册

【全局注册】

        使用 Vue.component(组件名,{选项}) 

 Vue.component('组件名',{
        //选项
    });

全局组件要在创建Vue实例之前注册

 <div id="app">

        <span-btn></span-btn>

 </div>

Vue.component('span-btn',{
        template:`
            <div>
                <span>{{count}}</span>
                <button @click="changeCount">按钮</button>
                <br />
            </div>
        `,
        data(){
            return {
                count:0
            }
        },
        methods:{
            changeCount(){
                this.count++;
            }
        }
    });

【局部注册】

        通过使用组件实例选项注册 在 components 选项中定义组件

注意：注册局部组件时，要 component 有 s

<div id="app">
        <mycounter></mycounter>
</div>

<script>
    new Vue({
        el:"#app",
        data:{

        },
        components:{
            mycounter:{
                template:`
                    <div>
                        <h2>这是局部注册template</h2>
                    </div>`
            }
        }
    });
</script>