https://www.jianshu.com/p/3504a1edba42
vue.js原生組件化開發（一）——組件開發基礎
前言
vue作為一個輕量級前端框架，其核心就是組件化開發。我們一般常用的是用腳手架vue-cli來進行開發和管理，一個個組件即為一個個vue頁面，這種叫單文件組件。我們在引用組件之時只需將組件頁面引入，再注冊即可使用。那么不用腳手架，如何進行組件開發呢，本文先介紹一下基礎知識吧。
組件使用流程分3步-----1、構建（定義），2、注冊，3、使用
1.組件構建
1.1 extend構建法
調用Vue.extend()方法，構建一個名字為myCom的組件
var myCom = Vue.extend({ template: '<div>這是我的組件</div>' }) 其中template定義模板的標簽，模板的內容需寫在該標簽下
1.2 template標簽構建法
template標簽構建，需在標簽上加id屬性用以后期注冊
<template id="myCom"> <div>這是template標簽構建的組件</div> </template> 1.3 script標簽構建法
script標簽同樣需加id屬性，同時還得加type="text/x-template"，加這個是為了告訴瀏覽器不執行編譯里面的代碼
<script type="text/x-template" id="myCom1"> <div>這是script標簽構建的組件</div> </script> 2.注冊組件
（1）全局注冊：一次注冊，可在多個vue實例中使用，需調用Vue.component()方法，這個方法需傳2個參數，第一個參數為組件名稱，第二個參數為組件構造時定義的變量。
我們先用全局注冊注冊上面例子中創建的myCom組件
Vue.component('my-com',myCom)
還有一種不需構建直接注冊的寫法——注冊語法糖
Vue.component('my-com',{ 'template':'<div>這是我的組件</div>' }) 'my-com'為給組件自定義的名字，在使用時會用到，后面myCom對應的就是上面構建的組件變量。
注意命名規范，一般組件名字以短橫線分隔或一個小寫單詞。
例：footer-nav，footernav
如果是用template及script標簽構建的組件，第二個參數就改為它們標簽上的id值
Vue.component('my-com',{
template: '#myCom'
})
（2）局部注冊：只能在注冊該組件的實例中使用
var app = new Vue({ el: '#app', components: { 'my-com': myCom } }) 注冊語法糖
var app = new Vue({ el: '#app', components: { 'my-com': { template: '<div>這是我的組件</div>' } } }) template及script構建的組件
var app = new Vue({ el: '#app', components: { 'my-com': { template: '#myCom' } } }) 3.調用組件
我們只需在需要調用組件的地方寫上組件名字的標簽即可
<div> /*調用組件*/ <my-com></my-com> </div> 4.例子
4.1 全局注冊
新建一個html文件，引入vue.js，並且定義2個vue實例app1和app2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue組件</title> <script src="js/vue.js"></script> </head> <body> <div id="app1"> <my-com></my-com> </div> <div id="app2"> <my-com></my-com> </div> <script> /*構建組件*/ var myCom = Vue.extend({ template: '<div>這是我的組件</div>' }); /*全局注冊組件*/ Vue.component('my-com',myCom); /*定義vue實例app1*/ var app1 = new Vue({ el: '#app1' }); /*定義vue實例app2*/ var app2 = new Vue({ el: '#app2' }); </script> </body> </html> 打開瀏覽器查看效果
可以看到全局注冊的組件在實例app1和實例app2中都可以被調用
一次注冊，多處使用
4.2 局部注冊
修改上面例子的html代碼，將全局注冊的組件改為局部注冊，注冊到實例app1下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue組件</title> <script src="js/vue.js"></script> </head> <body> <div id="app1"> <my-com></my-com> </div> <div id="app2"> <my-com></my-com> </div> <script> var myCom = Vue.extend({ template: '<div>這是我的組件</div>' }); // Vue.component('my-com',myCom); /*局部注冊組件*/ var app1 = new Vue({ el: '#app1', components:{ 'my-com':myCom } }); var app2 = new Vue({ el: '#app2' }); </script> </body> </html> 打開瀏覽器查看效果
可以看到只渲染了app1實例下的組件，app2實例雖然調用了該組件，但是因為這個組件沒有在其內部注冊，也沒有全局注冊，所以報錯說找不到該組件。
一次注冊，一處使用
4.3 template及script標簽構建組件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue組件</title> <script src="js/vue.js"></script> </head> <body> <div id="app1"> <my-com></my-com> <my-com1></my-com1> </div> <template id="myCom"> <div>這是template標簽構建的組件</div> </template> <script type="text/x-template" id="myCom1"> <div>這是script標簽構建的組件</div> </script> <script> Vue.component('my-com1',{ template: '#myCom1' }); var app1 = new Vue({ el: '#app1', components:{ 'my-com':{ template: '#myCom' } } }); </script> </body> </html> 打開瀏覽器查看效果
異步組件
當項目比較大型，結構比較復雜時，我們一般選用vue-cli腳手架去構建項目。因為vue-cli集成了webpack環境，使用單文件組件，開發更簡單，易上手，尤其是在對組件的處理上。對於原生vue.js，我們就得將組件構建在同一個html的script標簽下或者html的外部js中，所有組件集中在一塊，不容易管理，這也是原生vue,js的一點不便之處。
當然，在不使用腳手架的情況下想將一個個組件分別獨立成一個個html文件，再去引用注冊它們，也是可以實現的，但一般不推薦這樣做。
vue.js可以將異步組件定義為一個工廠函數。
例子
新建一個head.html
<div> 這是頭部 </div> 在index.html中異步引入head.html作為組件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue組件</title> <script src="js/vue.js"></script> <script src="js/jquery.min.js"></script> </head> <body> <div id="app1"> <head-com></head-com> </div> <script> Vue.component('head-com', function (resolve, reject) { $.get("./head.html").then(function (res) { resolve({ template: res }) }); }); var app1 = new Vue({ el: '#app1' }); </script> </body> </html> 當然要注意一點，使用$.get獲取本地文件是會跨域的，所以我們要把項目部署到服務器環境中。
我這里用的是xampp集成環境，將項目文件夾component放置在xampp/htdocs下，然后訪問localhost/component/index.html，
效果如下
可以看到在index.html中引入的head.html里的內容已經被添加進去