VueJS – 渲染函数（vue渲染函数有什么作用）16-慕源网

我们已经看到了组件及其用法。例如，我们有一个内容需要在整个项目中重复使用。我们可以将其转换为组件并使用它。

让我们看一个简单组件的例子，看看渲染函数在其中做了什么。

例子

<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 的简单组件示例，如下面的屏幕截图所示。

现在，如果我们想重用该组件，只需再次打印它即可。例如，

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

输出将如下所示。

但是，现在我们需要对组件进行一些更改。我们不希望打印相同的文本。我们怎样才能改变它？如果我们在组件内部输入一些东西，它会被考虑吗？

让我们考虑以下示例，看看会发生什么。

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

输出与我们之前看到的一样。它不会按照我们的意愿更改文本。

组件确实提供了一些称为slot 的东西。让我们利用它，看看我们是否得到了想要的结果。

例子

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

如上面的代码所示，在模板中我们添加了插槽，因此现在需要将值发送到组件内部，如下面的屏幕截图所示。

现在，让我们考虑要更改颜色和大小。例如，目前我们使用的是 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:{
   elementtype:{
      attributes:String,
      required:true
   }
}

我们定义了一个名为 elementtype 的属性，它采用字符串类型的属性字段。另一个必填字段，其中提到该字段是必填字段。

在渲染函数中，我们使用了 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
   )
}

Render 函数以 createElement 作为参数并返回相同的参数。CreateElement 以与在 JavaScript 中相同的方式创建 DOM 元素。我们还使用 attrs 字段中的值将元素类型拆分为逗号。

CreateElement 将第一个参数作为要创建的元素标签。它使用以下代码段传递给组件。

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

该组件需要如上图所示取 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]，这是我们在逗号分割后的值。使用样式，我们定义了颜色和字体大小。

最后是slot，也就是我们在下面这段代码的组件中给出的消息。

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

我们已经使用以下代码定义了要在 createElement 中打印的文本。

this.$slots.default

它采用组件字段中分配的默认值。

以下是我们在浏览器中得到的输出。

元素还显示了结构。这些是我们定义的组件 –

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