VueJS - 元件

上一頁
下一頁

Vue 元件是 VueJS 的重要特性之一，它可以建立可重用的自定義元素，並在 HTML 中使用。

讓我們透過一個例子來建立一個元件，這將有助於更好地理解元件如何在 VueJS 中工作。

示例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "component_test">
         <testcomponent></testcomponent>
      </div>
      <div id = "component_test1">
         <testcomponent></testcomponent>
      </div>
      <script type = "text/javascript" src = "js/vue_component.js"></script>
   </body>
</html>

vue_component.js

Vue.component('testcomponent',{
   template : '<div><h1>This is coming from component</h1></div>'
});
var vm = new Vue({
   el: '#component_test'
});
var vm1 = new Vue({
   el: '#component_test1'
});

在 .html 檔案中，我們建立了兩個帶有 id 為 component_test 和 component_test1 的 div。在上面顯示的 .js 檔案中，建立了兩個使用 div id 的 Vue 例項。我們建立了一個公共元件，用於這兩個檢視例項。

要建立元件，語法如下。

Vue.component('nameofthecomponent',{ // options});

建立元件後，元件名稱將成為自定義元素，並且可以在建立的 Vue 例項元素中使用，即在帶有 id 為 component_test 和 component_test1 的 div 內部。

在 .js 檔案中，我們使用 test component 作為元件名稱，並在 div 內部將其作為自定義元素使用。

示例

<div id = "component_test">
   <testcomponent></testcomponent>
</div>
<div id = "component_test1">
   <testcomponent></testcomponent>
</div>

在 .js 檔案中建立的元件中，我們添加了一個模板，併為其分配了 HTML 程式碼。這是一種註冊全域性元件的方法，可以將其作為任何 Vue 例項的一部分，如下面的指令碼所示。

Vue.component('testcomponent',{
   template : '<div><h1>This is coming from component</h1></div>'
});

執行後，將在瀏覽器中反映出來。

Global Component

元件被賦予了自定義元素標籤，即<testcomponent></testcomponent>。但是，當我們在瀏覽器中檢查它時，我們不會注意到模板中存在的普通 HTML 中的自定義標籤，如下面的螢幕截圖所示。

TestComponent

我們還直接將元件作為 Vue 例項的一部分，如下面的指令碼所示。

var vm = new Vue({
   el: '#component_test',
   components:{
      'testcomponent': {
         template : '<div><h1>This is coming from component</h1></div>'
      }
   }
});

這稱為區域性註冊，元件將僅是建立的 Vue 例項的一部分。

到目前為止，我們已經看到了帶有基本選項的基本元件。現在，讓我們向其中新增更多選項，例如資料和方法。就像 Vue 例項具有資料和方法一樣，元件也共享相同的內容。因此，我們將擴充套件我們已經看到的資料和方法的程式碼。

示例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "component_test">
         <testcomponent></testcomponent>
      </div>
      <div id = "component_test1">
         <testcomponent></testcomponent>
      </div>
      <script type = "text/javascript" src = "js/vue_component.js"></script>
   </body>
</html>

vue_component.js

Vue.component('testcomponent',{
   template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>',
   data: function() {
      return {
         name : "Ria"
      }
   },
   methods:{
      changename : function() {
         this.name = "Ben";
      },
      originalname: function() {
         this.name = "Ria";
      }
   }
});
var vm = new Vue({
   el: '#component_test'
});
var vm1 = new Vue({
   el: '#component_test1'
});

在上面的 .js 檔案中，我們添加了資料，它是一個函式，返回一個物件。該物件有一個 name 屬性，其值為 'Ria'。這在下面的模板中使用。

template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>',

儘管在元件中將資料作為函式，但我們可以像使用直接 Vue 例項一樣使用其屬性。此外，還添加了兩個方法，changename 和 originalname。在 changename 中，我們正在更改 name 屬性，而在 originalname 中，我們將其重置回原始名稱。

我們還在 div 上添加了兩個事件，mouseover 和 mouseout。事件的詳細資訊將在事件章節中討論。因此，現在，mouseover 呼叫 changename 方法，而 mouseout 呼叫 originalname 方法。

相同的顯示在下面的瀏覽器中。

OriginalName

如上面瀏覽器所示，它顯示了在 data 屬性中分配的名稱，即相同的名稱。我們還在 div 上分配了一個 mouseover 事件，以及一個 mouseout 事件。讓我們看看當我們滑鼠懸停和移出時會發生什麼。

Mouseover

在滑鼠懸停時，我們看到第一個元件的名稱更改為 Ben，但是第二個元件保持不變。這是因為資料元件是一個函式，它返回一個物件。因此，當它在一個地方更改時，在其他情況下不會被覆蓋。

動態元件

動態元件是使用關鍵字 <component></component> 建立的，並使用屬性繫結，如下面的示例所示。

示例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <component v-bind:is = "view"></component>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               view: 'component1'
            },
            components: {
               'component1': {
                  template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
               }
            }
         });
      </script>
   </body>
</html>

輸出

Dynamic Component

動態元件使用以下語法建立。

<component v-bind:is = "view"></component>

它具有 v-bind:is = ”view”，並且為其分配了一個值 view。View 在 Vue 例項中定義如下。

var vm = new Vue({
   el: '#databinding',
   data: {
      view: 'component1'
   },
   components: {
      'component1': {
         template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
      }
   }
});

執行後，模板 Dynamic Component 將在瀏覽器中顯示。

列印頁面
上一頁
下一頁
廣告