Vue.js中組件的示例分析

發(fā)布時間：2021-08-17 09:59:09 來源：億速云閱讀：95 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)Vue.js中組件的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

什么是組件？

組件使我們能夠?qū)?復(fù)雜的應(yīng)用程序分解成小塊。例如，典型的Web應(yīng)用程序?qū)⒕哂袠?biāo)題，側(cè)邊欄，內(nèi)容和頁腳等部分。

Vue.js允許我們將每個部分分解成單獨(dú)的模塊化代碼，稱為組件。這些組件可以擴(kuò)展，然后附加到你正在處理的應(yīng)用程序。使用組件是在整個應(yīng)用程序編寫中重用代碼的好方法。

假設(shè) 你有一個博客應(yīng)用程序，并且你想要顯示一列博客帖子。使用Vue組件，你可以做：

<blog-post></blog-post>

Vue處理剩下的事情。

創(chuàng)建一個將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>

在上面，你創(chuàng)建了一個簡單的Vue實例，在代碼中沒有組件因素。現(xiàn)在，如果你希望歡迎消息出現(xiàn)兩次，那么你怎么做？

你的猜測可能是讓 div 在 Vue實例掛載的地方出現(xiàn)兩次。這是行不通的。嘗試改變它從 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>

它仍然不會工作！

解決這個問題的唯一方法是創(chuàng)建一個組件。你如何創(chuàng)建一個組件？

組件是使用Vue.component（）構(gòu)造函數(shù)創(chuàng)建的。這個構(gòu)造函數(shù)有兩個參數(shù)：你的組件的名字（也可以叫做標(biāo)簽名）和一個包含組件選項（options）的對象。

讓我們使用上面的內(nèi)容創(chuàng)建一個組件。

Vue.component('welcome-message', {
  data: function() {
  return {
   domain: 'Tutsplus'
  }
  },
  template: '<p>Welcome to {{ domain }}</p>'
 })

在上面，組件名稱被稱為welcome-message。你的組件可以有你選擇的任何名稱。然而重要的是，這個名字不會影響任何HTML標(biāo)簽，因為你不想重寫它。

傳遞給構(gòu)造函數(shù)的options對象包含數(shù)據(jù)和模板。在創(chuàng)建組件時，你的數(shù)據(jù)應(yīng)該是一個函數(shù)，如上所見。被保存的數(shù)據(jù)應(yīng)該作為一個對象返回。

在沒有數(shù)據(jù)可以傳遞的情況下，傳遞如下的模板：

 Vue.component('welcome-message', {
  template: '<p>Welcome to Tutsplus</p>'
 })

完成之后，可以通過使用傳遞給構(gòu)造函數(shù)的名稱將其當(dāng)作常規(guī)HTML元素來在應(yīng)用程序中使用組件。它被這樣調(diào)用：<welcome-message> </ welcome-message>。

要多次輸出模板，可以根據(jù)需要多次調(diào)用組件，如下所示。

<!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>

這樣一來，歡迎消息將顯示四次。

將數(shù)據(jù)存儲在組件中

上面我提到數(shù)據(jù)必須是一個函數(shù)，它所包含的信息必須作為一個對象返回。為什么這樣？

當(dāng)返回的數(shù)據(jù)不是對象時，使用該數(shù)據(jù)的組件共享相同的源：共享數(shù)據(jù)。因此，一個組件的數(shù)據(jù)變化會影響另一個組件。當(dāng)數(shù)據(jù)作為對象返回時，這是不一樣的。

看看這是如何實際工作是很重要的。首先，讓我們看看數(shù)據(jù)作為對象返回的情況。

<!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>

你能猜到上面發(fā)生了什么嗎？

有兩個組件，并且這兩個組件共享相同的數(shù)據(jù)源，因為數(shù)據(jù)不作為對象返回。你怎么證明我是對的？當(dāng)從瀏覽器查看上述頁面時，你將看到一個組件的更改會導(dǎo)致另一個組件的數(shù)據(jù)發(fā)生更改。那么它應(yīng)該是怎樣的呢？

像這樣：

<!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>

這里的數(shù)據(jù)是作為一個對象返回的，一個組件的改變不會影響另一個組件。該功能是針對單個組件執(zhí)行的。在構(gòu)建應(yīng)用程序時，不要忘記這一點(diǎn)，這很重要。

創(chuàng)建和使用組件

使用到目前為止學(xué)到的內(nèi)容，讓我們使用 vue -cli 從頭開始一個新的Vue.js項目來實現(xiàn)它。如果你的機(jī)器上沒有安裝 vue -cli ，你可以通過運(yùn)行：

npm install -g vue-cli

開始你的新的Vue.js項目：

vue init webpack vue-component-app

導(dǎo)航到你的應(yīng)用程序，安裝依賴關(guān)系，并使用下面的命令運(yùn)行你的開發(fā)服務(wù)器。

cd vue-component-app
npm install
npm run dev

首先，你將重命名HelloWorld組件，這個組件是你將應(yīng)用程序初始化為Hello.vue時創(chuàng)建的組件。然后你將注冊這個組件作為一個全局組件在你的應(yīng)用程序中使用。

所以你的Hello組件應(yīng)該看起來像這樣。

#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>

你有歡迎文本顯示歡迎消息和作為數(shù)據(jù)傳遞的名稱。當(dāng)點(diǎn)擊歡迎消息下方的按鈕時，將調(diào)用changeName方法。名字將從亨利改為馬克。

要全局使用此組件，必須被注冊。你能猜到應(yīng)該在哪里完成這個操作嗎？如果你說main.js，恭喜你，答對了！

要注冊一個組件，可以導(dǎo)入它，然后使用Vue.component（）構(gòu)造函數(shù)進(jìn)行設(shè)置。自己動手試試。

我敢打賭，這個對你來說小菜一碟。以下是main.js文件中的內(nèi)容。

#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 }
})

這里除了導(dǎo)入你的Hello組件的那一行之外，沒有什么新東西。然后使用構(gòu)造函數(shù)注冊該組件。最后，對于這部分，組件需要使用你輸入的組件名稱來顯示。在這種情況下，組件是顯示名稱。這將在你的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>

打開服務(wù)器，打開http：// localhost：8080。點(diǎn)擊按鈕，名稱應(yīng)該改變。

我們來看看如何在本地使用一個組件。

在組件目錄中創(chuàng)建一個名為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組件中使用它，可以像導(dǎo)入Hello組件一樣將其導(dǎo)入。接下來，把它注冊，但這次你不需要使用Vue.component（）構(gòu)造函數(shù)。

你可以使用導(dǎo)出內(nèi)的組件對象進(jìn)行注冊。將用作元素標(biāo)記的組件的名稱必須作為值傳遞給對象。完成后，你現(xiàn)在可以使用元素標(biāo)記來輸出組件。

為了理解這一點(diǎn)，Hello組件應(yīng)該長這樣：

#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允許你為組件提供全局和本地樣式。是什么意思呢？在某些情況下，你希望組件中的某些元素與另一個組件中的對應(yīng)元素的樣式不同。Vue.js能夠幫助你。

一個很好的例子是你剛剛建立的小應(yīng)用程序。App.vue中的樣式是全局的; 這怎么可能？打開你的App.vue，風(fēng)格部分看起來像這樣。

<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 添加到樣式標(biāo)簽是造成這個差別的原因。嘗試通過刪除 scoped 來編輯一種組件樣式，你會看到這是如何運(yùn)作的。

關(guān)于“Vue.js中組件的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

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

Vue.js中組件的示例分析

猜你喜歡

最新資訊

相關(guān)推薦

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