搜尋

首頁  >  文章  >  web前端  >  詳細解讀Vue.js中的元件使用方法以及作用？

詳細解讀Vue.js中的元件使用方法以及作用？

亚连
亚连原創
2018-06-08 14:04:053400瀏覽

元件（Component）是 Vue.js 最強大的功能之一。元件可以擴充 HTML 元素，封裝可重複使用的程式碼。這篇文章主要介紹了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>
 <!-- p where Vue instance will be mounted -->
 <p id="app"></p>
 
 <!-- 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 p element
  new Vue({
   el: &#39;#app&#39;,
   data: {
   domain: &#39;Tutsplus&#39;
   },
   template: &#39;<p>Welcome to {{ domain }}</p>
  });
 </script>
</body>
</html>

在上面，你建立了一個簡單的Vue實例，在程式碼中沒有元件因素。現在，如果 你 希望歡迎訊息出現兩次，那 你 怎麼做？

你的猜測可能是 讓 p   在 Vue實例掛載的地方出現兩次。這是行不通的。試著改變它從 id 到 class ， 你會得到 ：

<!DOCTYPE html>
<html>
<head>
<title>VueJs Components</title>
</head>
<body>
 <!-- p where Vue instance will be mounted -->
 <p class="app"></p>
 <p class="app"></p>
 
 <!-- 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 p element
  new Vue({
   el: &#39;.app&#39;,
   data: {
   domain: &#39;Tutsplus&#39;
   },
   template: &#39;<p>Welcome to {{ domain }}</p>
  });
 </script>
</body>
</html>

它仍然不會工作！

解決這個問題的唯一方法是建立一個元件。你如何創建一個組件？

元件是使用Vue.component（）建構子建立的。這個建構子有兩個參數：你的元件的名字（也可以叫做標籤名）和一個包含元件選項（options）的物件。

讓我們使用上面的內容來建立一個元件。 

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

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

傳遞給建構子的options物件包含資料和模板。在創建組件時，你的數據應該是一個函數，如上所見。被保存的資料應該作為一個物件返回。

在沒有資料可以傳遞的情況下，傳遞如下的模板：

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

完成之後，可以透過使用傳遞給建構函式的名稱將其當作常規HTML元素來在應用程式中使用組件。它被這樣呼叫：b96f265ddb2ff8b5c74c4b8864998c55 99483aea6b39271594c4a1f67cf42565。

要多次輸出模板，可以根據需要多次呼叫元件，如下所示。 




VueJs Components


 
 

 
 
 
 
 

 
 
 
 <script>
 Vue.component(&amp;#39;welcome-message&amp;#39;, {
  data: function() {
  return {
   domain: &amp;#39;Tutsplus&amp;#39;
  }
  },
  template: &amp;#39;&lt;p&gt;Welcome to {{ domain }}&lt;/p&gt;&amp;#39;
 })
 
 // A new Vue instance is created and mounted to your p element
 new Vue({
  el: &#39;#app&#39;
 });
 </script>

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

將資料儲存在元件中

上面我提到資料必須是一個函數，它所包含的資訊必須作為一個物件傳回。為什麼這樣？

當傳回的資料不是物件時，使用該資料的元件共用相同的來源：共用資料。因此，一個組件的資料變化會影響另一個組件。當資料作為物件返回時，這是不一樣的。

看看這是如何實際工作是很重要的。首先，讓我們看看資料作為物件傳回的情況。 

<!DOCTYPE html>
<html>
<head>
<title>VueJs Components</title>
</head>
<body>
 <!-- p where Vue instance will be mounted -->
 <p id="app">
 <welcome-message></welcome-message>
 <welcome-message></welcome-message>
 </p>
 
 <!-- Vue.js is included in your page via CDN -->
 <script src="https://unpkg.com/vue"></script>
 <script>
 var data = { name: &#39;Henry&#39; }
 
 Vue.component(&#39;welcome-message&#39;, {
  data: function() {
  return data
  },
  template: &#39;<p>Hello {{ name }}, welcome to TutsPlus (<button @click="changeName">Change Name</button>)</p>&#39;,
  methods :{
   changeName: function() {
   this.name = &#39;Mark&#39;
   }
  }
 })
 
 // A new Vue instance is created and mounted to your p element
 new Vue({
  el: &#39;#app&#39;
 });
 </script>
</body>
</html>

你能猜到上面發生了什麼事嗎？

有兩個元件，這兩個元件共享相同的資料來源，因為資料不會作為物件傳回。你怎麼證明我是對的？當從瀏覽器查看上述頁面時，你將看到一個元件的變更會導致另一個元件的資料變更。那麼它應該是怎麼樣的呢？

像這樣：

<!DOCTYPE html>
<html>
<head>
<title>VueJs Components</title>
</head>
<body>
 <!-- p where Vue instance will be mounted -->
 <p id="app">
 <welcome-message></welcome-message>
 <welcome-message></welcome-message>
 </p>
 
 <!-- Vue.js is included in your page via CDN -->
 <script src="https://unpkg.com/vue"></script>
 <script>
 
 Vue.component(&#39;welcome-message&#39;, {
  data: function() {
  return {
   name: &#39;Henry&#39;
  }
  },
  template: &#39;<p>Hello {{ name }}, welcome to TutsPlus (<button @click="changeName">Change Name</button>)</p>&#39;,
  methods :{
   changeName: function() {
   this.name = &#39;Mark&#39;
   }
  }
 })
 
 // A new Vue instance is created and mounted to your p element
 new Vue({
  el: &#39;#app&#39;
 });
 </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>
 <p class="hello">
 <p>Welcome to TutsPlus {{ name }}</p>
 <hr>
 <button @click="changeName">Change Display Name</button>
 </p>
</template>
<script>
export default {
 name: &#39;Hello&#39;,
 data () {
 return {
  name: &#39;Henry&#39;
 }
 },
 methods: {
 changeName () {
  this.name = &#39;Mark&#39;
 }
 }
}
</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 &#39;vue&#39;
import App from &#39;./App&#39;
import Home from &#39;./components/Hello&#39;
Vue.config.productionTip = false
Vue.component(&#39;display-name&#39;, Home)
/* eslint-disable no-new */
new Vue({
 el: &#39;#app&#39;,
 template: &#39;<App/>&#39;,
 components: { App }
})

这里除了导入你的Hello组件的那一行之外，没有什么新东西。然后使用构造函数注册该组件。最后，对于这部分，组件需要使用你输入的组件名称来显示。在这种情况下，组件是显示名称。这将在你的App.vue文件中完成。

打开src / App.vue并使其看起来像这样。

#src/App.vue
<template>
<p id= "app" >
<display-name/>
</p>
</template>
<script>
export default {
}
</script>
<style>
#app {
font-family: &#39;Avenir&#39; , 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>
 <p class="hello">
 <p>This component is imported locally.</p>
 </p>
</template>
<script>
export default {
 name: &#39;Detail&#39;
}
</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>
 <p 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/>
 </p>
</template>
<script>
// Importation of Detail component is done
import Detail from &#39;./Detail&#39;
export default {
 name: &#39;HelloWorld&#39;,
 data () {
 return {
  name: &#39;Henry&#39;
 }
 },
 methods: {
 changeName () {
  this.name = &#39;Mark&#39;
 }
 },
 /**
 * 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: &#39;Avenir&#39;, 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中如何使用ztree（详细教程）

使用JS如何实现瀑布流插件

在JS中如何实现将html转为pdf功能

以上是詳細解讀Vue.js中的元件使用方法以及作用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：vue全域元件總結下一篇：vue全域元件總結

相關文章

看更多