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>

　　若有什么错误，欢迎指正。。。

更多专业前端知识，请上 【猿2048】www.mk2048.com