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

時間 2019-12-05

原文原文鏈接

前言

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

組件使用流程

1.組件構建

1.1 extend構建法

調用Vue.extend()方法，構建一個名字爲myCom的組件前端

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

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

1.2 template標籤構建法

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

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

1.3 script標籤構建法

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

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

2.註冊組件

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

咱們先用全局註冊註冊上面例子中建立的myCom組件vue-cli

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>