vuejs教程：简单组件例子，渲染函数在它里面做什么

2018-09-2916:36:32WEB前端开发Comments1,777 views字数 4392阅读模式

学习了组件和它的用法。例如，有一个需要在整个项目中重用的内容。我们可以将其转换为组件并使用它。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6009.html

下面来看看一个简单组件的例子，看看渲染函数在它里面做什么。
示例
创建一个文件：render_function.html -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6009.html

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs渲染函数</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>

考虑上面一个打印"Hello World"的简单组件的例子，在浏览器输出效果如下图所示 -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6009.html

现在，如果想重新使用组件，可以通过重新打印来实现。例如，文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6009.html

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

在浏览器输出效果如下图所示 -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6009.html

但是，现在需要对组件进行一些更改。我们不希望打印相同的文本。那么如何修改它？如果在组件内部输入一些东西，是否会考虑到？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6009.html

考虑下面的例子，看看会输出什么效果 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6009.html

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

输出结果仍与我们前面看到的一样。它不会改变我们需要的文字值。如下 -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6009.html

组件提供了一些被称为插槽的东西。在下面的示例中使用它，看看是否得到了预期的结果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6009.html

创建一个文件：render_function-slots.html文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6009.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>

如上面的代码所示，在模板中添加了插槽，因此现在需要在组件内部发送值，如以下屏幕截图所示。
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6009.html

现在，假设想要改变颜色和大小。例如，目前使用的是h2标签，希望将HTML标签更改为同一个组件的p标签或div标签。如何能够灵活地进行如此多的改变？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6009.html

可以在渲染函数的帮助下做到这一点。渲染函数有助于使组件动态化，并通过保持通用性和使用相同组件传递参数来使用它所需的方式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6009.html

示例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6009.html

创建一个文件：render_function-style.html -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6009.html

<html>
   <head>
      <title>VueJs渲染函数样式</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>

在上面的代码中，我们已经改变了组件，并使用下面的一段代码添加了带有props属性的渲染函数。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6009.html

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属性如下所示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6009.html

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

已经定义了一个名为elementtype的属性，它接受string类型的属性字段。另一个必填字段，其中提到该字段是强制性的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6009.html

在渲染函数中，使用了elementtype属性，如下面的一段代码所示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6009.html

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字段中的值。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6009.html

CreateElement将第一个参数作为要创建的元素标签。它使用下面的一段代码传递给组件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6009.html

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

该组件需要采取props字段如上所示。它开始于：props的名字。在这里传递元素标签，颜色，字体大小和元素的ID。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6009.html

在渲染函数中，在createElement中，使用逗号进行分割，所以第一个元素是elementtag，它被赋给了createElemet，如下面的一段代码所示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6009.html

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

a[0]是html元素标记。下一个参数是元素标签的属性。它们在attr字段中定义在下面的一段代码中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6009.html

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

我们已经定义了元素标签的id和style两个属性。对于id，传递了a[3]，这是在逗号分割后的值。使用样式定义了颜色和字体大小。
最后是slot，下面的代码片段中给出的消息。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6009.html

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

使用下面的一段代码定义了要在createElement中打印的文本。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6009.html

this.$slots.default

它采用组件字段中分配的默认值。以下是在浏览器中获得的输出。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6009.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6009.html

元素也显示结构。下面是定义的组件 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6009.html

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

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6009.html

vuejs教程：简单组件例子，渲染函数在它里面做什么

编写异步 JavaScript 的 10 个最佳实践

搞懂 Vue3 defineModel 双向绑定：告别繁琐代码！

Tailwind CSS响应式Web设计全面掌握指南

全栈开发使用Node js（Express）、MYSQL进行CRUD

TypeScript项目搭配Axios封装后端接口调用

jQuery 4.0 测试版，体积小性能好不再支持 IE 10

JavaScript实现轮播图方法，代码简单

Next.Js 与 Tailwind 项目开发笔记

使用Vite创建Vue3项目并开发第一个组件

asyncio 中并发运行的多个任务要如何精确控制

Comment