小編給大家分享一下Vue.js框架中構建和使用組件的基本方法，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
Vue.js 框架中構建和使用組件的基本方法。
在所有實驗開始之前，我需要先在code目錄中創建一個名為00_test的目錄，以便用于存放接下來的一系列實驗項目，由于這些項目只能用于體驗 Vue 組件的構建與使用方法，并沒有實際的應用功能，所以我給了它00這個編號。那么，下面就來開始第一個實驗吧！為此，我需要繼續在code/00_test目錄中再創建一個名為component_1的實驗目錄，并在該目錄下執行npm install vue命令來安裝 Vue.js 框架。最后，我只需在code/00_test/component_1目錄下創建一個名為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>學習 vue 組件實驗（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>在上述實驗中，我用兩種不同的方式分別創建并注冊了say-hello和welcome-you兩個組件。接下來就借由這兩個組件來介紹一下這兩種組件的使用。首先是say-hello組件，該組件是通過調用Vue.component()方法來創建并注冊到應用程序中的，使用該方法創建的組件通常被稱之為"全局組件"，我們在調用它的時候需要提供兩個參數：
第一個參數應該是一個字符串對象，用于指定組件的名稱，該名稱也是我們要在 HTML 文檔中使用的自定義標簽元素，而由于 HTML 代碼是大小寫不敏感的，所以我個人會建議大家在給組件起名字的時候應該盡量一律使用小寫字母，單詞之間可以使用-這樣分隔符進行區隔。
第二個參數應該是一個 JavaScript 對象，用于設置組件的各項具體參數。這里定義了以下三項最基本參數：
當然了，除了上面三個基本參數之外，我們還可以為組件設置更多參數，例如自定義事件及其處理函數等，這些我將會在后續的程序編寫體驗中展示。
template：該參數是個字符串對象，用于指定該組件的 HTML 模版代碼，需要注意的是，這段代碼說對應的 DOM 對象必須有且只能有一個根節點。而這個對象在最終的 HTML 文檔中將會由該組件所對應自定義標簽所代表，在這里就是<say-hello>。
props：該參數是一個字符串數組，該數組中的每個元素都是該組件所對應的自定義標簽的一個屬性，該組件的用戶可以通過v-bind指令將該屬性綁定到某一數據上，以便將數據傳到組件內部。例如在這里，我在<say-hello>標簽中就用v-bind指令將該標簽的who屬性綁定到了 Vue 實例對象的who數據上，并將其傳進say-hello組件中。
data：該參數是一個函數，用于設置組件自身的數據，例如這里的you，我將從調用者那里獲取的who數據賦值給了它。對于后者，我們可以用this引用來獲取。
下面，我們再來看welcome-you組件的構建。如你所見，該組件是在 vue 實例的components成員中構建并注冊到應用程序中的，使用該方法創建的組件通常被稱之為"局部組件"（它與全局組件的區別是，全局組件會在程序運行時全部加載，而局部組件只會在被實際用到時加載） 。該components成員的值也是一個 JSON 格式的數據對象，該數據對象中的每一個成員都是一個局部組件，這些組件采用鍵/值對的方式來定義,鍵對應的是組件的名稱，值對應的是組件參數的設置。當然了，由于局部組件的命名規則與具體參數的設置方法都與全局對象一致，這里就不再重復說明了。
需要注意的是，第一個實驗項目的編寫方式將 HTML 代碼、Vue 實例的構建代碼以及組件的構建代碼糅合在了一起，這對于提高代碼的可復用性這個目的來說，顯然是不行的。要想解決這個問題，我們可以利用 ES6 規范新增的模塊規則將這三部分代碼隔離開來。為了體驗這種用法，我繼續開始了第二個實驗。具體做法就是在code/00_test目錄中再創建一個名為component_2的實驗目錄，并在該目錄下執行npm install vue命令來安裝 Vue.js 框架。最后，我只需在code/00_test/component_2目錄下創建一個名為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>學習 vue 組件實驗（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">標簽中使用了后面將要定義的組件所對應的自定義標簽。接下來，我只需要在相同的目錄下創建一個名為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語句導入了后續要在sayhello.js文件中構建的組件，然后在構建 Vue 實例時將其注冊成了局部組件。最后，我只需在同一目錄下再創建這個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;在這部分代碼中，我先定義了一個局部組件，然后再使用 ES6 新增的export default語句將其導出為模塊。當然，考慮到各種 Web 瀏覽器對 ES6 規范的實際支持情況，以及 Vue.js 框架本身使用的是 CommonJS 模塊規范，所以上述實驗依然可能不是編寫 Vue.js 項目的最佳方式，其中可能還需要配置 babel 和 webpack 這樣的轉譯和構建工具來輔助。在下一篇筆記中，我就來記錄如何使用這些工具來構建具體的 vue 應用程序。
看完了這篇文章，相信你對“Vue.js框架中構建和使用組件的基本方法”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
