vue.extend与vue.component的区别和联系

一味的闷头开发，却对基础概念缺乏理解，是个大坑... 查阅官网后现对自己的理解记录一下，用于日后复习巩固

Vue.extend({}) 简述：使用vue.extend返回一个子类构造函数，也就是预设部分选项的vue实例构造器。

后可使用vue.component进行实例化、或使用new extendName().$mount(''+el)方式进行实例化（从而实现模拟组件）。

   let Footer = Vuew.extend({

     data(){

       return {

         footerName:'I CAN DO IT...'

       }

     },

     template:'<div>{{footerName}}</div>'

   });

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>

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

巴特西

vue.extend与vue.component的区别和联系

最新文章

热门文章