Rumah >hujung hadapan web >tutorial js >在vue中如何渲染函数render（详细教程）

在vue中如何渲染函数render（详细教程）

亚连asal: 2018-06-21 11:33:223329semak imbas

本篇文章主要介绍了vue渲染函数render的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

1.什么是render函数？

vue通过 template 来创建你的 HTML。但是，在特殊情况下，这种写死的模式无法满足需求，必须需要js的编程能力。此时，需要用render来创建HTML。

比如如下我想要实现如下html：

<p id="container">
 <h1>
  <a href="#" rel="external nofollow" rel="external nofollow" >
   Hello world!
  </a>
 </h1>
</p>

我们会如下使用：

 <!DOCTYPE html>
<html>
 <head>
  <title>演示Vue</title>
  <style>
   
  </style>
 </head>
 <body>
  <p id="container">
   <tb-heading :level="1">
    <a href="#" rel="external nofollow" rel="external nofollow" >Hello world!</a>
   </tb-heading>
  </p>
 </body>
 <script src="./vue.js"></script>

 <script type="text/x-template" id="templateId">
  <h1 v-if="level === 1">
   <slot></slot>
  </h1>
  <h2 v-else-if="level === 2">
   <slot></slot>
  </h2>
 </script>
 <script>
  Vue.component(&#39;tb-heading&#39;, {
   template: &#39;#templateId&#39;,
   props: {
    level: {
     type: Number,
     required: true
    }
   }
  });
  new Vue({
   el: &#39;#container&#39;
  });
 </script>
</html>

2.例：

遇到的问题：

在工作中，我创建了一个button组件，又创建了一个button-group组件

button组件较为简单，就是一个可以输入type/size/icon等属性的button

button渲染后结果

此为渲染后结果。

然后，创建button-group组件，目标结果为

目标结果

此处，不仅要在最外层包裹一层p，还要在每个button组件外层包裹一层p标签。此处，就需要使用render函数了。

既然有了render函数，就不再需要template标签了，vue文件中只需要script标签（该组件style是全局的）

button-group.vue如下

<script>
 export default {
  name: "XButtonGroup",
  props: {
   compact: { //自定义的button-group属性，影响其classname
    type: Boolean,
    default: true
   }
  },
  render(createElement) {
   //此处创建element
  },
  computed: {
   groupClass() {
    const className = ["field"];  //通过计算属性监听compact属性传入className
    className.push(this.compact ? "has-addons" : "is-grouped");
    return className;
   }
  }
 };
</script>

接下来就要看render函数了。

render函数中的createElement方法有三个参数。第一个参数为外层标签名，第二个为外层标签的属性对象，第三个为外层标签中的内容

所以第一步

  render(createElement) {
   return createElement(
    &#39;p&#39;, {
     class: this.groupClass
    }, &#39;内容&#39;,
   )
  }

渲染结果：

那怎样在外层p中渲染button组件呢？

render函数的第三个参数除了字符串，还可以传入VNode的数组。VNode就是vue中的节点。

此处，我们通过this.$slots.default获取所有插入到button-group组件内默认slot的button节点

  render(createElement) {
   return createElement(
    &#39;p&#39;, {
     class: this.groupClass
    }, this.$slots.default,
   )
  },

渲染结果：

button已经正确渲染到了外层p中。但是怎么在每个button外层包裹一层元素呢。createElement会创建新的VNode，而render函数第三个参数需要VNode数组，所以我们需要传入一个由createElement返回值组成的数组。

  render(createElement) {
   //遍历每一个VNode,用createElement函数在外层包裹class为control的p标签，组成新的VNode数组
   const arry = this.$slots.default.map(VNode => {
    return createElement(&#39;p&#39;, {
     class: &#39;control&#39;
    }, [VNode])
   })
   return createElement(
    &#39;p&#39;, {
     class: this.groupClass
    }, arry,
   )
  },

渲染结果：

并且根据button-group的compact属性可以切换不同的class，生成不同的效果

<x-button-group :compact="true">
  <x-button v-for="(item,index) in buttonType" :key="index" :type="item">{{item}}</x-button>
</x-button-group>
<x-button-group :compact="false">
  <x-button v-for="(item,index) in buttonType" :key="index" :type="item">{{item}}</x-button>
</x-button-group>

上面是我整理给大家的，希望今后会对大家有帮助。

在Webpack中有关自动化构建（详细教程）

在javaScript中有关空值和假值的说法

在JavaScript中遇到的BUG

在微信小程序中如何实现页面跳转传值

Atas ialah kandungan terperinci 在vue中如何渲染函数render（详细教程）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html webpack 字符串 class JS 对象 default this 微信小程序 bug 自动化

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：有关JS希尔排序算法（详细教程）Artikel seterusnya：详细解读vue中的mixin

Artikel berkaitan

Lihat lagi