VUE组件

组件的注册

全局注册

• 在组件中设置数据的方法是跟Vue实例有点不同。data是一个函数并且它是直接返回一个对象，而不是像Vue实例中直接就是一个对象

<div class="app">
	<!--调用注册的组件-->
    <button-counter></button-counter>
</div>

<script>
    //全局注册
    //注册组件
    Vue.component('button-counter',{
        data:function(){
            return{}
        },
        template: '<h1>全局注册组件</h1>'
    })
    //实例化Vue
    let app = new Vue({
        el:".app",
        data:{},
    })
</script>

在注册组件时，注册组件语句一定要写在实例化Vue语句前，因为vue的实例化会把全局注册的组件注册到当前实例中，实例化完成你再全局注册组件是对这个实例不起作用的，所以第一段代码是已经实例化完毕vue了又去注册了组件，这样即使在调用组件也不会起作用了。

局部注册

• 由于使用了全局注册组件的话，那无论这个组件要使用还是不使用，Vue都会进行执行。这样就会导致资源的浪费。局部注册组件的好处就是，按需要进行组件加入从而减少资源的浪费。

<div class="app">
    <button-counter></button-counter>
</div>

<script>
	//注册组件
    let Child = {
        data:function(){
			return{}
        }
        template: '<h1>局部注册组件</h1>'
    }
    //创建根实例
    new Vue({
        el:".app",
        //components属性是实例化Vue中的一个选项，这个选项就是进行组件的指定。
        //属性名就是组件名，值就是组件的内容。
        components:{
        	// <button-counter> 将只在父模板可用
            "button-counter":Child,
        }
    })
</script>