溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關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-app npm install npm 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>
h2, h3 {
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 = false
Vue.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>
h2, h3 {
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 done
import 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>
h2, h3 {
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>
h2, h3 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>將 scoped 添加到樣式標簽是造成這個差別的原因。 嘗試通過刪除 scoped 來編輯一種組件樣式，你會看到這是如何運作的。
關于“Vue.js中組件的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
