?Vue.js框架中構(gòu)建和使用組件的基本方法

發(fā)布時(shí)間：2021-01-27 12:44:19 來源：億速云閱讀：131 作者：小新欄目：編程語言

小編給大家分享一下Vue.js框架中構(gòu)建和使用組件的基本方法，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

Vue.js 框架中構(gòu)建和使用組件的基本方法。

在所有實(shí)驗(yàn)開始之前，我需要先在code目錄中創(chuàng)建一個(gè)名為00_test的目錄，以便用于存放接下來的一系列實(shí)驗(yàn)項(xiàng)目，由于這些項(xiàng)目只能用于體驗(yàn) Vue 組件的構(gòu)建與使用方法，并沒有實(shí)際的應(yīng)用功能，所以我給了它00這個(gè)編號。那么，下面就來開始第一個(gè)實(shí)驗(yàn)吧！為此，我需要繼續(xù)在code/00_test目錄中再創(chuàng)建一個(gè)名為component_1的實(shí)驗(yàn)?zāi)夸?，并在該目錄下?zhí)行npm install vue命令來安裝 Vue.js 框架。最后，我只需在code/00_test/component_1目錄下創(chuàng)建一個(gè)名為index.htm的文件，并輸入如下代碼：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA  -Compatible" content="ie=edge">
    <title>學(xué)習(xí) vue 組件實(shí)驗(yàn)（1）：組件注冊</title>
`</head>
<body>
    <p id="app">
        <say-hello :who="who"></say-hello>
        <welcome-you :who="who"></welcome-you>
    </p>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        // 全局組件注冊
        Vue.component('say-hello', {
            template: `<h2>你好， {{ you }}！</h2>`,
            props: ['who'],
            data: function() {
                return {
                    you: this.who
                };
            }
        });

        const app = new Vue({
            el: '#app',
            // 局部組件注冊
            components: {
                'welcome-you': {
                    template: `<h3>歡迎你， {{ you }}！</h3>`,
                    props: ['who'],
                    data: function() {
                        return {
                            you: this.who
                        };
                    }
                }
            },
            data: {
                who: 'vue'
            }
        });
    </script>
</body>
</html>

在上述實(shí)驗(yàn)中，我用兩種不同的方式分別創(chuàng)建并注冊了say-hello和welcome-you兩個(gè)組件。接下來就借由這兩個(gè)組件來介紹一下這兩種組件的使用。首先是say-hello組件，該組件是通過調(diào)用Vue.component()方法來創(chuàng)建并注冊到應(yīng)用程序中的，使用該方法創(chuàng)建的組件通常被稱之為"全局組件"，我們在調(diào)用它的時(shí)候需要提供兩個(gè)參數(shù)：

第一個(gè)參數(shù)應(yīng)該是一個(gè)字符串對象，用于指定組件的名稱，該名稱也是我們要在 HTML 文檔中使用的自定義標(biāo)簽元素，而由于 HTML 代碼是大小寫不敏感的，所以我個(gè)人會(huì)建議大家在給組件起名字的時(shí)候應(yīng)該盡量一律使用小寫字母，單詞之間可以使用-這樣分隔符進(jìn)行區(qū)隔。
第二個(gè)參數(shù)應(yīng)該是一個(gè) JavaScript 對象，用于設(shè)置組件的各項(xiàng)具體參數(shù)。這里定義了以下三項(xiàng)最基本參數(shù)：
當(dāng)然了，除了上面三個(gè)基本參數(shù)之外，我們還可以為組件設(shè)置更多參數(shù)，例如自定義事件及其處理函數(shù)等，這些我將會(huì)在后續(xù)的程序編寫體驗(yàn)中展示。

template：該參數(shù)是個(gè)字符串對象，用于指定該組件的 HTML 模版代碼，需要注意的是，這段代碼說對應(yīng)的 DOM 對象必須有且只能有一個(gè)根節(jié)點(diǎn)。而這個(gè)對象在最終的 HTML 文檔中將會(huì)由該組件所對應(yīng)自定義標(biāo)簽所代表，在這里就是<say-hello>。
props：該參數(shù)是一個(gè)字符串?dāng)?shù)組，該數(shù)組中的每個(gè)元素都是該組件所對應(yīng)的自定義標(biāo)簽的一個(gè)屬性，該組件的用戶可以通過v-bind指令將該屬性綁定到某一數(shù)據(jù)上，以便將數(shù)據(jù)傳到組件內(nèi)部。例如在這里，我在<say-hello>標(biāo)簽中就用v-bind指令將該標(biāo)簽的who屬性綁定到了 Vue 實(shí)例對象的who數(shù)據(jù)上，并將其傳進(jìn)say-hello組件中。
data：該參數(shù)是一個(gè)函數(shù)，用于設(shè)置組件自身的數(shù)據(jù)，例如這里的you，我將從調(diào)用者那里獲取的who數(shù)據(jù)賦值給了它。對于后者，我們可以用this引用來獲取。

下面，我們再來看welcome-you組件的構(gòu)建。如你所見，該組件是在 vue 實(shí)例的components成員中構(gòu)建并注冊到應(yīng)用程序中的，使用該方法創(chuàng)建的組件通常被稱之為"局部組件"（它與全局組件的區(qū)別是，全局組件會(huì)在程序運(yùn)行時(shí)全部加載，而局部組件只會(huì)在被實(shí)際用到時(shí)加載）。該components成員的值也是一個(gè) JSON 格式的數(shù)據(jù)對象，該數(shù)據(jù)對象中的每一個(gè)成員都是一個(gè)局部組件，這些組件采用鍵/值對的方式來定義,鍵對應(yīng)的是組件的名稱，值對應(yīng)的是組件參數(shù)的設(shè)置。當(dāng)然了，由于局部組件的命名規(guī)則與具體參數(shù)的設(shè)置方法都與全局對象一致，這里就不再重復(fù)說明了。

需要注意的是，第一個(gè)實(shí)驗(yàn)項(xiàng)目的編寫方式將 HTML 代碼、Vue 實(shí)例的構(gòu)建代碼以及組件的構(gòu)建代碼糅合在了一起，這對于提高代碼的可復(fù)用性這個(gè)目的來說，顯然是不行的。要想解決這個(gè)問題，我們可以利用 ES6 規(guī)范新增的模塊規(guī)則將這三部分代碼隔離開來。為了體驗(yàn)這種用法，我繼續(xù)開始了第二個(gè)實(shí)驗(yàn)。具體做法就是在code/00_test目錄中再創(chuàng)建一個(gè)名為component_2的實(shí)驗(yàn)?zāi)夸?，并在該目錄下?zhí)行npm install vue命令來安裝 Vue.js 框架。最后，我只需在code/00_test/component_2目錄下創(chuàng)建一個(gè)名為index.htm的文件，并輸入如下代碼：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script type="module" src="./main.js"></script>
    <title>學(xué)習(xí) vue 組件實(shí)驗(yàn)（2）：以 ES6 模塊的方式注冊組件</title>
</head>
<body>
    <p id="app">
        <say-hello :who="who"></say-hello>
    </p>
</body>
</html>

在上述 HTML 代碼中，我們在照常引入 vue.js 框架之后，使用模塊的方式引入了main.js腳本文件，最好在<p id="app">標(biāo)簽中使用了后面將要定義的組件所對應(yīng)的自定義標(biāo)簽。接下來，我只需要在相同的目錄下創(chuàng)建一個(gè)名為main.js的 JavaScript 腳本文件，并在其中輸入如下代碼：

// import Vue from './node_modules/vue/dist/vue.js';
import sayhello from './sayhello.js';

const app = new Vue({
    el: '#app',
    components: {
        'say-hello': sayhello
    },
    data: {
        who:'vue'
    }
});

在上述 JavaScript 代碼中，我首先使用了 ES6 新增的import-from語句導(dǎo)入了后續(xù)要在sayhello.js文件中構(gòu)建的組件，然后在構(gòu)建 Vue 實(shí)例時(shí)將其注冊成了局部組件。最后，我只需在同一目錄下再創(chuàng)建這個(gè)sayhello.js腳本文件，并在其中輸入如下代碼：

const tpl = `
    <p>
        <h2>你好， {{ you }}！</h2>
        <input type="text" v-model="you" />
    </p>
`;

const sayhello = {
    template: tpl,
    props : ['who'],
    data : function() {
        return {
            you: this.who
        }
    }
};

export default sayhello;

在這部分代碼中，我先定義了一個(gè)局部組件，然后再使用 ES6 新增的export default語句將其導(dǎo)出為模塊。當(dāng)然，考慮到各種 Web 瀏覽器對 ES6 規(guī)范的實(shí)際支持情況，以及 Vue.js 框架本身使用的是 CommonJS 模塊規(guī)范，所以上述實(shí)驗(yàn)依然可能不是編寫 Vue.js 項(xiàng)目的最佳方式，其中可能還需要配置 babel 和 webpack 這樣的轉(zhuǎn)譯和構(gòu)建工具來輔助。在下一篇筆記中，我就來記錄如何使用這些工具來構(gòu)建具體的 vue 應(yīng)用程序。

看完了這篇文章，相信你對“Vue.js框架中構(gòu)建和使用組件的基本方法”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

?Vue.js框架中構(gòu)建和使用組件的基本方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽