vue.extend與vue.component的區別和聯繫

一味的悶頭開發，卻對基礎概念缺少理解，是個大坑... 查閱官網後現對本身的理解記錄一下，用於往後複習鞏固

Vue.extend({}) 簡述：使用vue.extend返回一個子類構造函數，也就是預設部分選項的vue實例構造器。

後可以使用vue.component進行實例化、或使用new extendName().$mount(''+el)方式進行實例化（從而實現模擬組件）。

1   let Footer = Vuew.extend({
2     data(){
3       return {
4         footerName:'I CAN DO IT...'
5       }
6     },
7     template:'<div>{{footerName}}</div>'
8   });

 Vue.component({})簡述：很少介紹了。。。用於生成全局組件

使用：

　　1，Vue.component使用Vue.extend生成的構造函數：

 Vue.component('footer-view',Footer);

　　2，實例化構造函數從而模擬組件：

new Footer({
    data:{
      '...':''
    }
  }).$mount('my-footer')

完整代碼：

<template>
  <my-footer></my-footer>
</template>
<script>
  let Footer = Vuew.extend({
    data(){
      return {
        footerName:'I CAN DO IT...'
      }
    },
    template:'<div>{{footerName}}</div>'
  });
  Vue.component('footer-view',Footer);
  // new Footer({
  //   data:{
  //     '...':''
  //   }
  // }).$mount('my-footer')
</script>

　　如有什麼錯誤，歡迎指正。。。