vue组件的初步理解

我一直很疑惑，什么是组件。


首先看官方文档的介绍。啥？一大堆，反正我以前没有看懂。不过他有一句，--------》|所有的 Vue 组件同时也都是 Vue 的实例  
这句我懂了。 //1. 全局组件 
vue的实例
那么也就是说，组件和new Vue（{}）出来的是一个东西。所以。组件里面也有 ，data, methods ，template,created. mounted, computed,components 这些选项对象和钩子函数然后，文档里面还有一句：
 组件可以扩展 HTML 元素 这句什么意思？
我们组件里面有template属性，于是可以这样

 template : ` <div id="box"> 我是一个div啊啊</div>`

这不，组件就能扩展html了吗？

再看看文档，看看有哪些方式能够定义组件。

        //1. 全局组件 
        Vue.component('All', 
            {
              data : function(){
                  return{}
              },
              methods: {
              },
              template :  ` <div  id="box"> 我是一个div啊啊</div>`,
              components : {
              }
            }) //当然，还有很多属性computed，mounted我就不写了



 
 


  
  

   
   //2. 局部组件 ，
  
  

  
  


  
  

   
   var 
   
   Child = {
  
  

  
  

   
   template: 
   
   '<div>我是局部组件。</div>'
  
  

  
  


  
  

   
   }
  
  

 
 



那么最粗浅的理解，现在看来只要包含 data, template,created. mounted 

还有对应扩展的html等一系列的东西，就可以称为vue组件。





组件一直都写在template里面不太好吧，万一多起来，岂不是要命。






       //于是
        
        <template id='local'>
            <div>我是欢快的局部组件。</div>
        </template>

          var Local = {
            data : function(){
              return{}
              },
              template: '#local'
          }




那么全局组件和局部组件有什么区别呢？

在一个项目里面，例如 局部组件B 比 全局组件 后定义 ，那么就能在这个 B组件 里面用全局组件






 3.  Vue.extend({}) 这样定义的组件。好像已经不推荐使用了哦。