<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs渲染函數(shù)</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 : '<h2>Hello World</h2>',
            data: function() {
            },
            methods:{
            }
         });
         var vm = new Vue({
            el: '#component_test'
         });
      </script>
   </body>
</html>

考慮上面一個(gè)打印"Hello World"的簡單組件的例子，在瀏覽器輸出效果如下圖所示 -

現(xiàn)在，如果想重新使用組件，可以通過重新打印來實(shí)現(xiàn)。例如，

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

在瀏覽器輸出效果如下圖所示 -

但是，現(xiàn)在需要對組件進(jìn)行一些更改。我們不希望打印相同的文本。那么如何修改它？如果在組件內(nèi)部輸入一些東西，是否會(huì)考慮到？

考慮下面的例子，看看會(huì)輸出什么效果 -

<div id = "component_test">
   <testcomponent>Hello Java</testcomponent>
   <testcomponent>Hello Ruby</testcomponent>
   <testcomponent>Hello Linux</testcomponent>
   <testcomponent>Hello Python</testcomponent>
</div>

輸出結(jié)果仍與我們前面看到的一樣。它不會(huì)改變我們需要的文字值。如下 -

組件提供了一些被稱為插槽的東西。在下面的示例中使用它，看看是否得到了預(yù)期的結(jié)果。

創(chuàng)建一個(gè)文件：render_function-slots.html

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

如上面的代碼所示，在模板中添加了插槽，因此現(xiàn)在需要在組件內(nèi)部發(fā)送值，如以下屏幕截圖所示。

現(xiàn)在，假設(shè)想要改變顏色和大小。例如，目前使用的是h2標(biāo)簽，希望將HTML標(biāo)簽更改為同一個(gè)組件的p標(biāo)簽或div標(biāo)簽。如何能夠靈活地進(jìn)行如此多的改變？

可以在渲染函數(shù)的幫助下做到這一點(diǎn)。渲染函數(shù)有助于使組件動(dòng)態(tài)化，并通過保持通用性和使用相同組件傳遞參數(shù)來使用它所需的方式。

示例

創(chuàng)建一個(gè)文件：render_function-style.html -

<html>
   <head>
      <title>VueJs渲染函數(shù)樣式</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "component_test">
         <testcomponent :elementtype = "'div,red,25,div1'">Hello Java</testcomponent>
         <testcomponent :elementtype = "'h3,green,25,h3tag'">Hello Ruby</testcomponent>
         <testcomponent :elementtype = "'p,blue,25,ptag'">Hello C#</testcomponent>
         <testcomponent :elementtype = "'div,green,25,divtag'">Hello Python</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>

在上面的代碼中，我們已經(jīng)改變了組件，并使用下面的一段代碼添加了帶有props屬性的渲染函數(shù)。

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

已經(jīng)定義了一個(gè)名為elementtype的屬性，它接受string類型的屬性字段。另一個(gè)必填字段，其中提到該字段是強(qiáng)制性的。

在渲染函數(shù)中，使用了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
   )
}

渲染函數(shù)將createElement作為參數(shù)并返回相同的值。 CreateElement和JavaScript中一樣創(chuàng)建DOM元素。還用逗號分隔元素類型，使用attrs字段中的值。

CreateElement將第一個(gè)參數(shù)作為要?jiǎng)?chuàng)建的元素標(biāo)簽。它使用下面的一段代碼傳遞給組件。

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

該組件需要采取props字段如上所示。它開始于：props的名字。在這里傳遞元素標(biāo)簽，顏色，字體大小和元素的ID。

在渲染函數(shù)中，在createElement中，使用逗號進(jìn)行分割，所以第一個(gè)元素是elementtag，它被賦給了createElemet，如下面的一段代碼所示。

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

a[0]是html元素標(biāo)記。下一個(gè)參數(shù)是元素標(biāo)簽的屬性。它們在attr字段中定義在下面的一段代碼中。

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

我們已經(jīng)定義了元素標(biāo)簽的id和style兩個(gè)屬性。對于id，傳遞了a[3]，這是在逗號分割后的值。使用樣式定義了顏色和字體大小。
最后是slot，下面的代碼片段中給出的消息。

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

使用下面的一段代碼定義了要在createElement中打印的文本。

this.$slots.default

它采用組件字段中分配的默認(rèn)值。以下是在瀏覽器中獲得的輸出。

元素也顯示結(jié)構(gòu)。下面是定義的組件 -

<div id = "component_test">
   <testcomponent :elementtype = "'div,red,25,div1'">Hello Java</testcomponent>
   <testcomponent :elementtype = "'h3,green,25,h3tag'">Hello Ruby</testcomponent>
   <testcomponent :elementtype = "'p,blue,25,ptag'">Hello C#</testcomponent>
   <testcomponent :elementtype = "'div,green,25,divtag'">Hello Python</testcomponent>
</div>

上一篇：VueJS應(yīng)用示例下一篇：VueJS路由

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

VueJS渲染函數(shù)