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>
      <script type = "text/javascript">
         Vue.component('testcomponent',{
            template : '<h1>Hello World</h1>',
            data: function() {
            },
            methods:{
            }
         });
         var vm = new Vue({
            el: '#component_test'
         });
      </script>
   </body>
</html>

考慮上面一個簡單的元件示例，它列印“Hello World”，如下面的螢幕截圖所示。

Render Function

現在，如果我們想重用該元件，只需再次列印它即可。例如，

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

輸出如下所示。

Component Reuse

但是，現在我們需要對元件進行一些更改。我們不希望列印相同的文字。我們如何更改它？如果我們在元件內部輸入一些內容，它是否會被考慮在內？

讓我們考慮以下示例，看看會發生什麼。

<div id = "component_test">
   <testcomponent>Hello Jai</testcomponent>
   <testcomponent>Hello Roy</testcomponent>
   <testcomponent>Hello Ria</testcomponent>
   <testcomponent>Hello Ben</testcomponent>
</div>

輸出與我們之前看到的相同。它沒有按照我們的預期更改文字。

Component Reuse

元件提供了一些稱為插槽的東西。讓我們使用它，看看是否能得到我們想要的結果。

示例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "component_test">
         <testcomponent>Hello Jai</testcomponent>
         <testcomponent>Hello Roy</testcomponent>
         <testcomponent>Hello Ria</testcomponent>
         <testcomponent>Hello Ben</testcomponent>
      </div>
      <script type = "text/javascript">
         Vue.component('testcomponent',{
            template : '<h1><slot></slot></h1>',
            data: function() {
            },
            methods:{
            }
         });
         var vm = new Vue({
            el: '#component_test'
         });
      </script>
   </body>
</html>

如上程式碼所示，在模板中我們添加了插槽，因此現在它接收發送到元件內部的值，如下面的螢幕截圖所示。

Slot Example

現在，假設我們想要更改顏色和大小。例如，目前我們使用的是 h1 標籤，我們希望將 HTML 標籤更改為 p 標籤或 div 標籤以用於同一個元件。我們如何靈活地進行如此多的更改？

我們可以藉助渲染函式來實現。渲染函式有助於使元件動態化，並根據需要使用它，使其保持通用性，並幫助使用同一個元件傳遞引數。

示例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "component_test">
         <testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>
         <testcomponent :elementtype = "'h3,green,25,h3tag'">Hello Roy</testcomponent>
         <testcomponent :elementtype = "'p,blue,25,ptag'">Hello Ria</testcomponent>
         <testcomponent :elementtype = "'div,green,25,divtag'">Hello Ben</testcomponent>
      </div>
      <script type = "text/javascript">
         Vue.component('testcomponent',{
            render :function(createElement){
               var a = this.elementtype.split(",");
               return createElement(a[0],{
                  attrs:{
                     id:a[3],
                     style:"color:"+a[1]+";font-size:"+a[2]+";"
                  }
               },
               this.$slots.default
               )
            },
            props:{
               elementtype:{
                  attributes:String,
                  required:true
               }
            }
         });
         var vm = new Vue({
            el: '#component_test'
         });
      </script>
   </body>
</html>

在上面的程式碼中，我們更改了元件並添加了帶有 props 屬性的渲染函式，使用了以下程式碼段。

Vue.component('testcomponent',{
   render :function(createElement){
      var a = this.elementtype.split(",");
      return createElement(a[0],{
         attrs:{
            id:a[3],
            style:"color:"+a[1]+";font-size:"+a[2]+";"
         }
      },
      this.$slots.default
      )
   },
   props:{
      elementtype:{
         attributes:String,
         required:true
      }
   }
});

props 看起來如下。

props:{
   elementtype:{
      attributes:String,
      required:true
   }
}

我們定義了一個名為 elementtype 的屬性，它接收型別為字串的 attributes 欄位。另一個必填欄位，表示該欄位是必須的。

在渲染函式中，我們使用了 elementtype 屬性，如下面的程式碼段所示。

render :function(createElement){
   var a = this.elementtype.split(",");
   return createElement(a[0],{
      attrs:{
         id:a[3],
         style:"color:"+a[1]+";font-size:"+a[2]+";"
      }
   },
   this.$slots.default
   )
}

渲染函式將 createElement 作為引數並返回它。createElement 以與 JavaScript 中相同的方式建立 DOM 元素。我們還使用 attrs 欄位中的值以逗號分隔 elementtype。

createElement 將第一個引數作為要建立的 elementtag。它透過以下程式碼段傳遞給元件。

<testcomponent  :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>

元件需要接收 props 欄位，如上所示。它以 : 開頭，後跟 props 的名稱。在這裡，我們傳遞了元素標籤、顏色、字型大小和元素的 id。

在渲染函式中，在 createElement 中，我們以逗號分隔，因此第一個元素是 elementtag，它傳遞給 createElemet，如下面的程式碼段所示。

return createElement(
   a[0],{
      attrs:{
         id:a[3],
         style:"color:"+a[1]+";font-size:"+a[2]+";"
      }
   },
   this.$slots.default
)

a[0] 是 html 元素標籤。下一個引數是元素標籤的屬性。它們在以下程式碼段的 attr 欄位中定義。

attrs:{
   id:a[3],
   style:"color:"+a[1]+";font-size:"+a[2]+";"
}

我們為元素標籤定義了兩個屬性 - id 和 style。對於 id，我們傳遞 a[3]，它是我們以逗號分隔後獲得的值。使用 style，我們定義了顏色和字型大小。

最後一個是插槽，即我們在以下程式碼段的元件中給出的訊息。

<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>

我們使用以下程式碼段在 createElement 中定義了要列印的文字。

this.$slots.default

它接收元件欄位中分配的預設值。

以下是我們在瀏覽器中獲得的輸出。

Component Field

這些元素還顯示了結構。這些是我們定義的元件 -

<div id = "component_test">
   <testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>
   <testcomponent :elementtype = "'h3,green,25,h3tag'">Hello Roy</testcomponent>
   <testcomponent :elementtype = "'p,blue,25,ptag'">Hello Ria</testcomponent>
   <testcomponent :elementtype = "'div,green,25,divtag'">Hello Ben</testcomponent>
</div>
列印頁面
上一頁
下一頁
廣告