首頁 > 開發者 > JavaScript
解析Vue.js中的組件，解析Vue.js組件
介紹
在使用Vue.js時，Vue.js組件非常重要。在本教程中，我們將深入研究Vue.js組件，理解基礎知識並將其應用於應用程式。讓我們開始吧。
什麼是組件？
組件使我們能夠將 複雜的 應用程式分解成小塊。例如，典型的Web應用程式將具有標題，側邊欄，內容和頁尾等部分。
Vue.js允許我們將每個部分分解成單獨的模組化代碼，稱為組件。這些組件可以擴充，然後附加到 你 正在處理的應用程式。 使用 組件是 在 整個應用程式 編寫 中重用代碼的好方法。
假設 你 有一個部落格應用程式，並且 你 想要顯示 一列 部落格 文章 。使用Vue組件，你可以做：
<blog-post></blog-post>
Vue處理剩下的事情。
建立一個將Vue執行個體掛載到DOM元素的簡單HTML頁面。 你 將使用它來瞭解組件。以下是HTML頁面 範例 ：
<!DOCTYPE html><html><head><title>VueJs Components</title></head><body> <!-- Div where Vue instance will be mounted --> <div id="app"></div> <!-- Vue.js is included in your page via CDN --> <script src="https://unpkg.com/vue"></script> <script> // A new Vue instance is created and mounted to your div element new Vue({ el: '#app', data: { domain: 'Tutsplus' }, template: '<p>Welcome to {{ domain }}</p> }); </script></body></html>
在上面，你建立了一個簡單的Vue執行個體，在代碼中沒有組件因素。 現在，如果 你 希望歡迎訊息出現兩次，那麼 你 怎麼做？
你的猜測可能是 讓 div 在 Vue執行個體掛載的地方出現兩次。 這是行不通的。 嘗試改變它從 id 到 class ， 你會得到 ：
<!DOCTYPE html><html><head><title>VueJs Components</title></head><body> <!-- Div where Vue instance will be mounted --> <div class="app"></div> <div class="app"></div> <!-- Vue.js is included in your page via CDN --> <script src="https://unpkg.com/vue"></script> <script> // A new Vue instance is created and mounted to your div element new Vue({ el: '.app', data: { domain: 'Tutsplus' }, template: '<p>Welcome to {{ domain }}</p> }); </script></body></html>
它仍然不會工作！
解決這個問題的唯一方法是建立一個組件。 你如何建立一個組件？
組件是使用Vue.component（）建構函式建立的。 這個建構函式有兩個參數：你的組件的名字（也可以叫做標籤名）和一個包含組件選項（options）的對象。
讓我們使用上面的內容建立一個組件。
Vue.component('welcome-message', { data: function() { return { domain: 'Tutsplus' } }, template: '<p>Welcome to {{ domain }}</p>' })
在上面，組件名稱被稱為welcome-message。 你的組件可以有你選擇的任何名稱。 然而重要的是，這個名字不會影響任何HTML標籤，因為你不想重寫它。
傳遞給建構函式的options對象包含資料和模板。 在建立組件時，你的資料應該是一個函數，如上所見。 被儲存的資料應該作為一個對象返回。
在沒有資料可以傳遞的情況下，傳遞如下的模板：
Vue.component('welcome-message', { template: '<p>Welcome to Tutsplus</p>' })
完成之後，可以通過使用傳遞給建構函式的名稱將其當作常規HTML元素來在應用程式中使用組件。 它被這樣調用：<welcome-message> </ welcome-message>。
要多次輸出模板，可以根據需要多次調用組件，如下所示。
<!DOCTYPE html><html><head><title>VueJs Components</title></head><body> <!-- Div where Vue instance will be mounted --> <div id="app"> <welcome-message></welcome-message> <welcome-message></welcome-message> <welcome-message></welcome-message> <welcome-message></welcome-message> </div> <!-- Vue.js is included in your page via CDN --> <script src="https://unpkg.com/vue"></script> <script> Vue.component('welcome-message', { data: function() { return { domain: 'Tutsplus' } }, template: '<p>Welcome to {{ domain }}</p>' }) // A new Vue instance is created and mounted to your div element new Vue({ el: '#app' }); </script></body></html>
這樣一來，歡迎訊息將顯示四次。
將資料存放區在組件中
上面我提到資料必須是一個函數，它所包含的資訊必須作為一個對象返回。 為什麼這樣？
當返回的資料不是對象時，使用該資料的組件共用相同的源：共用資料。 因此，一個組件的資料變化會影響另一個組件。 當資料作為對象返回時，這是不一樣的。
看看這是如何實際工作是很重要的。 首先，讓我們看看資料作為對象返回的情況。
<!DOCTYPE html><html><head><title>VueJs Components</title></head><body> <!-- Div where Vue instance will be mounted --> <div id="app"> <welcome-message></welcome-message> <welcome-message></welcome-message> </div> <!-- Vue.js is included in your page via CDN --> <script src="https://unpkg.com/vue"></script> <script> var data = { name: 'Henry' } Vue.component('welcome-message', { data: function() { return data }, template: '<p>Hello {{ name }}, welcome to TutsPlus (<button @click="changeName">Change Name</button>)</p>', methods :{ changeName: function() { this.name = 'Mark' } } }) // A new Vue instance is created and mounted to your div element new Vue({ el: '#app' }); </script></body></html>
你能猜到上面發生了什麼嗎？
有兩個組件，並且這兩個組件共用相同的資料來源，因為資料不作為對象返回。 你怎麼證明我是對的？ 當從瀏覽器查看上述頁面時，你將看到一個組件的更改會導致另一個組件的資料發生更改。那麼它應該是怎樣的呢？
像這樣：
<!DOCTYPE html><html><head><title>VueJs Components</title></head><body> <!-- Div where Vue instance will be mounted --> <div id="app"> <welcome-message></welcome-message> <welcome-message></welcome-message> </div> <!-- Vue.js is included in your page via CDN --> <script src="https://unpkg.com/vue"></script> <script> Vue.component('welcome-message', { data: function() { return { name: 'Henry' } }, template: '<p>Hello {{ name }}, welcome to TutsPlus (<button @click="changeName">Change Name</button>)</p>', methods :{ changeName: function() { this.name = 'Mark' } } }) // A new Vue instance is created and mounted to your div element new Vue({ el: '#app' }); </script></body></html>
這裡的資料是作為一個對象返回的，一個組件的改變不會影響另一個組件。 該功能是針對單個組件執行的。 在構建應用程式時，不要忘記這一點，這很重要。
建立和使用組件
使用到目前為止學到的內容，讓我們使用 vue -cli 從頭開始一個新的Vue.js項目來實現它。 如果你的機器上沒有安裝 vue -cli ，你可以通過運行：
npm install -g vue-cli
開始你的新的Vue.js項目：
vue init webpack vue-component-app
導航到你的應用程式，安裝依賴關係，並使用下面的命令運行你的程式開發伺服器。
cd vue-component-appnpm installnpm run dev
首先，你將重新命名HelloWorld組件，這個組件是你將應用程式初始化為Hello.vue時建立的組件。然後你將註冊這個組件作為一個全域群組件在你的應用程式中使用。
所以你的Hello組件應該看起來像這樣。
#src/components/Hello.vue<template> <div class="hello"> <p>Welcome to TutsPlus {{ name }}</p> <hr> <button @click="changeName">Change Display Name</button> </div></template><script>export default { name: 'Hello', data () { return { name: 'Henry' } }, methods: { changeName () { this.name = 'Mark' } }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>h1, h2 { font-weight: normal;}ul { list-style-type: none; padding: 0;}li { display: inline-block; margin: 0 10px;}a { color: #42b983;}</style>
你有歡迎文本顯示歡迎訊息和作為資料傳遞的名稱。 當點擊歡迎訊息下方的按鈕時，將調用changeName方法。 名字將從亨利改為馬克。
要全域使用此組件，必須被註冊。你能猜到應該在哪裡完成這個操作嗎？如果你說main.js，恭喜你，答對了！
要註冊一個組件，可以匯入它，然後使用Vue.component（）建構函式進行設定。自己動手試試。
我敢打賭，這個對你來說小菜一碟。以下是main.js檔案中的內容。
#src/main.js// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import Home from './components/Hello'Vue.config.productionTip = falseVue.component('display-name', Home)/* eslint-disable no-new */new Vue({ el: '#app', template: '<App/>', components: { App }})
這裡除了匯入你的Hello組件的那一行之外，沒有什麼新東西。然後使用建構函式註冊該組件。最後，對於這部分，組件需要使用你輸入的組件名稱來顯示。在這種情況下，組件是顯示名稱。這將在你的App.vue檔案中完成。
開啟src / App.vue並使其看起來像這樣。
#src/App.vue<template><div id= "app" ><display-name/></div></template><script>export default {}</script><style>#app {font-family: 'Avenir' , Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;}</style>
開啟伺服器，開啟http：// localhost：8080。 點擊按鈕，名稱應該改變。
我們來看看如何在本地使用一個組件。
在組件目錄中建立一個名為Detail.vue的檔案。 這個組件不會做任何特殊的事情 - 它將被用在Hello組件中。
使你的Detail.vue檔案就像這樣。
#src/components/Detail.vue<template> <div class="hello"> <p>This component is imported locally.</p> </div></template><script>export default { name: 'Detail'}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>h1, h2 { font-weight: normal;}ul { list-style-type: none; padding: 0;}li { display: inline-block; margin: 0 10px;}a { color: #42b983;}</style>
要在Hello組件中使用它，可以像匯入Hello組件一樣將其匯入。 接下來，把它註冊，但這次你不需要使用Vue.component（）建構函式。
你可以使用匯出內的組件對象進行註冊。將用作元素標記的組件的名稱必須作為值傳遞給對象。 完成後，你現在可以使用元素標記來輸出組件。
為了理解這一點，Hello組件應該長這樣：
#src/components/Hello.vue<template> <div class="hello"> <p>Welcome to TutsPlus {{ name }}</p> <hr> <button @click="changeName">Change Display Name</button> <!-- Detail component is outputted using the name it was registered with --> <Detail/> </div></template><script>// Importation of Detail component is doneimport Detail from './Detail'export default { name: 'HelloWorld', data () { return { name: 'Henry' } }, methods: { changeName () { this.name = 'Mark' } }, /** * Detail component gets registered locally. * This component can only be used inside the Hello component * The value passed is the name of the component */ components: { Detail }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>h1, h2 { font-weight: normal;}ul { list-style-type: none; padding: 0;}li { display: inline-block; margin: 0 10px;}a { color: #42b983;}</style>
重新整理頁面以查看新頁面。
範圍組件樣式
Vue.js允許你為組件提供全域和本機樣式。是什麼意思呢？在某些情況下，你希望組件中的某些元素與另一個組件中的對應元素的樣式不同。Vue.js能夠協助你。
一個很好的例子是你剛剛建立的小應用程式。App.vue中的樣式是全域的; 這怎麼可能？ 開啟你的App.vue，風格部分看起來像這樣。
<style>#app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}</style>
這與Detail.vue不同，看起來像這樣。
<style scoped>h1, h2 { font-weight: normal;} ul { list-style-type: none; padding: 0;} li { display: inline-block; margin: 0 10px;} a { color: #42b983;}</style>
將 scoped 添加到樣式標籤是造成這個差別的原因。 嘗試通過刪除 scoped 來編輯一種組件樣式，你會看到這是如何運作的。
結論
雖然這個文章有點長，但是我相信你會喜歡它。
現在你知道如何有效地使用組件，並且瞭解如何在現有應用程式中構建組件。在使用vue-cli時，你還可以在本地和全域範圍內建立和使用組件。當你想為一個組件使用特定的風格時，你已經看到了如何使用scoped來做到這一點。
你現在可以繼續構建使用組件的複雜Vue.js應用程式。瞭解Vue.js允許你重用代碼，你的頁首，頁尾，登入面板和搜尋欄可以用作組件。
總結
以上所述是小編給大家介紹的Vue.js中的組件，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
