Vue 组件全局注册与局部注册

实现以下效果

Html

<div id='app'></div>

Js 

       //局部注册
        let fot={
          data(){
            return{
              count:0,
            }
          },
          template:'<div>foot   {{count}}<button @click="count++">点击</button></div>',
          };

        //全局注册
        Vue.component('hed',{
           template:'<div>bbbbb<fot></fot><fot></fot></div>',
           components:{fot} //局部注册
        })


        let a=new Vue({
          el:'#app',
          data:{},
          template:'<div>aaaa<hed></hed></div>',
          
        })

注意：1.局部注册组件需要在全局注册组件中引用，html内无法直接引用局部注册组件

          局部注册组件写法：

        //局部注册
        let fot={
          template:'<div>foot</div>',
          };

全局组件引用局部组件写法：

        //全局注册
        Vue.component('hed',{
           template:'<div>bbbbb<fot></fot><fot></fot></div>',
           components:{fot} //局部注册
        })

      

     2.组件中的data要以函数的形式书写，为了组件多次引用时数据不会相互干扰（全局组件与局部组件均是这种写法） ，根节点中的data可以写成对象形式不用写成function形式，因为根组件不会被复用

       写法如下：

 data(){
            return{
              count:0,
            }
          }

组件代码一定要写在根节点声明代码的上面，也就是vue.component的代码段要写在 const=new Vue({})代码段的上面