一味的悶頭開發，卻對基礎概念缺乏理解，是個大坑... 查閱官網后現對自己的理解記錄一下，用于日后復習鞏固

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

總結

以上是生活随笔為你收集整理的vue.extend与vue.component的区别和联系的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。