vue.js原生組件化開發（一）——組件開發基礎

時間 2019-12-08

原文原文鏈接

前言html

vue做爲一個輕量級前端框架，其核心就是組件化開發。咱們通常經常使用的是用腳手架vue-cli來進行開發和管理，一個個組件即爲一個個vue頁面，這種叫單文件組件。咱們在引用組件之時只需將組件頁面引入，再註冊便可使用。那麼不用腳手架，如何進行組件開發呢，本文先介紹一下基礎知識吧。前端

組件使用流程
1.組件構建
1.1 extend構建法
調用Vue.extend()方法，構建一個名字爲myCom的組件vue

1 var myCom = Vue.extend({
2 template: '<div>這是個人組件</div>'
3 })

其中template定義模板的標籤，模板的內容需寫在該標籤下jquery

1.2 template標籤構建法
template標籤構建，需在標籤上加id屬性用之後期註冊webpack

1 <template id="myCom">
2 <div>這是template標籤構建的組件</div>
3 </template>

1.3 script標籤構建法
script標籤一樣需加id屬性，同時還得加type="text/x-template"，加這個是爲了告訴瀏覽器不執行編譯裏面的代碼web

1 <script type="text/x-template" id="myCom1">
2 <div>這是script標籤構建的組件</div>
3 </script>

2.註冊組件
（1）全局註冊：一次註冊，可在多個vue實例中使用，需調用Vue.component()方法，這個方法需傳2個參數，第一個參數爲組件名稱，第二個參數爲組件構造時定義的變量。vue-cli

咱們先用全局註冊註冊上面例子中建立的myCom組件跨域

1 Vue.component('my-com',myCom)
2 還有一種不需構建直接註冊的寫法——註冊語法糖
3 
4 Vue.component('my-com',{
5 'template':'<div>這是個人組件</div>'
6 })

'my-com'爲給組件自定義的名字，在使用時會用到，後面myCom對應的就是上面構建的組件變量。瀏覽器

注意命名規範，通常組件名字以短橫線分隔或一個小寫單詞。
例：footer-nav，footernav前端框架

若是是用template及script標籤構建的組件，第二個參數就改成它們標籤上的id值

1 Vue.component('my-com',{
2 template: '#myCom'
3 })

（2）局部註冊：只能在註冊該組件的實例中使用

1 var app = new Vue({
2 el: '#app',
3 components: {
4 'my-com': myCom
5 }
6 })

註冊語法糖

1 var app = new Vue({
2 el: '#app',
3 components: {
4 'my-com': {
5 template: '<div>這是個人組件</div>'
6 }
7 }
8 })

template及script構建的組件

1 var app = new Vue({
2 el: '#app',
3 components: {
4 'my-com': {
5 template: '#myCom'
6 }
7 }
8 })

3.調用組件

咱們只需在須要調用組件的地方寫上組件名字的標籤便可

1 <div>
2 /*調用組件*/
3 <my-com></my-com>
4 </div>

4.例子

4.1 全局註冊
新建一個html文件，引入vue.js，而且定義2個vue實例app1和app2

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>vue組件</title>
 6 <script src="js/vue.js"></script>
 7 </head>
 8 <body>
 9 <div id="app1">
10 <my-com></my-com>
11 </div>
12 <div id="app2">
13 <my-com></my-com>
14 </div>
15 
16 <script>
17 /*構建組件*/
18 var myCom = Vue.extend({
19 template: '<div>這是個人組件</div>'
20 });
21 /*全局註冊組件*/
22 Vue.component('my-com',myCom);
23 
24 /*定義vue實例app1*/
25 var app1 = new Vue({
26 el: '#app1'
27 });
28 
29 /*定義vue實例app2*/
30 var app2 = new Vue({
31 el: '#app2'
32 });
33 </script>
34 </body>
35 </html>

打開瀏覽器查看效果

能夠看到全局註冊的組件在實例app1和實例app2中均可以被調用

一次註冊，多處使用

4.2 局部註冊
修改上面例子的html代碼，將全局註冊的組件改成局部註冊，註冊到實例app1下

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>vue組件</title>
 6 <script src="js/vue.js"></script>
 7 </head>
 8 <body>
 9 <div id="app1">
10 <my-com></my-com>
11 </div>
12 <div id="app2">
13 <my-com></my-com>
14 </div>
15 
16 <script>
17 var myCom = Vue.extend({
18 template: '<div>這是個人組件</div>'
19 });
20 
21 // Vue.component('my-com',myCom);
22 /*局部註冊組件*/
23 var app1 = new Vue({
24 el: '#app1',
25 components:{
26 'my-com':myCom
27 }
28 });
29 
30 var app2 = new Vue({
31 el: '#app2'
32 });
33 </script>
34 </body>
35 </html>

打開瀏覽器查看效果

能夠看到只渲染了app1實例下的組件，app2實例雖然調用了該組件，可是由於這個組件沒有在其內部註冊，也沒有全局註冊，因此報錯說找不到該組件。

一次註冊，一處使用

4.3 template及script標籤構建組件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>vue組件</title>
 6 <script src="js/vue.js"></script>
 7 </head>
 8 <body>
 9 <div id="app1">
10 <my-com></my-com>
11 <my-com1></my-com1>
12 </div>
13 
14 <template id="myCom">
15 <div>這是template標籤構建的組件</div>
16 </template>
17 
18 <script type="text/x-template" id="myCom1">
19 <div>這是script標籤構建的組件</div>
20 </script>
21 
22 <script>
23 Vue.component('my-com1',{
24 template: '#myCom1'
25 });
26 
27 var app1 = new Vue({
28 el: '#app1',
29 components:{
30 'my-com':{
31 template: '#myCom'
32 }
33 }
34 });
35 </script>
36 </body>
37 </html>

打開瀏覽器查看效果

異步組件
當項目比較大型，結構比較複雜時，咱們通常選用vue-cli腳手架去構建項目。由於vue-cli集成了webpack環境，使用單文件組件，開發更簡單，易上手，尤爲是在對組件的處理上。對於原生vue.js，咱們就得將組件構建在同一個html的script標籤下或者html的外部js中，全部組件集中在一塊，不容易管理，這也是原生vue,js的一點不便之處。
固然，在不使用腳手架的狀況下想將一個個組件分別獨立成一個個html文件，再去引用註冊它們，也是能夠實現的，但通常不推薦這樣作。
vue.js能夠將異步組件定義爲一個工廠函數。
例子
新建一個head.html

 1 <div>
 2 這是頭部
 3 </div>
 4 在index.html中異步引入head.html做爲組件
 5 
 6 <!DOCTYPE html>
 7 <html lang="en">
 8 <head>
 9 <meta charset="UTF-8">
10 <title>vue組件</title>
11 <script src="js/vue.js"></script>
12 <script src="js/jquery.min.js"></script>
13 </head>
14 <body>
15 <div id="app1">
16 <head-com></head-com>
17 </div>
18 <script>
19 Vue.component('head-com', function (resolve, reject) {
20 $.get("./head.html").then(function (res) {
21 resolve({
22 template: res
23 })
24 });
25 });
26 
27 var app1 = new Vue({
28 el: '#app1'
29 });
30 
31 </script>
32 </body>
33 </html>