2.例：

遇到的問題：

在工作中，我創(chuàng)建了一個button組件，又創(chuàng)建了一個button-group組件

button組件較為簡單，就是一個可以輸入type/size/icon等屬性的button

此為渲染后結果。

然后，創(chuàng)建button-group組件，目標結果為

此處，不僅要在最外層包裹一層div，還要在每個button組件外層包裹一層p標簽。此處，就需要使用render函數(shù)了。

既然有了render函數(shù)，就不再需要template標簽了，vue文件中只需要script標簽（該組件style是全局的）

button-group.vue如下

接下來就要看render函數(shù)了。

render函數(shù)中的createElement方法有三個參數(shù)。第一個參數(shù)為外層標簽名，第二個為外層標簽的屬性對象，第三個為外層標簽中的內(nèi)容

所以第一步

  render(createElement) {
   return createElement(
    'div', {
     class: this.groupClass
    }, '內(nèi)容',
   )
  }

渲染結果：

那怎樣在外層div中渲染button組件呢？

render函數(shù)的第三個參數(shù)除了字符串，還可以傳入VNode的數(shù)組。VNode就是vue中的節(jié)點。

此處，我們通過this.$slots.default獲取所有插入到button-group組件內(nèi)默認slot的button節(jié)點

  render(createElement) {
   return createElement(
    'div', {
     class: this.groupClass
    }, this.$slots.default,
   )
  },

渲染結果：

button已經(jīng)正確渲染到了外層div中。但是怎么在每個button外層包裹一層元素呢。createElement會創(chuàng)建新的VNode，而render函數(shù)第三個參數(shù)需要VNode數(shù)組，所以我們需要傳入一個由createElement返回值組成的數(shù)組。

  render(createElement) {
   //遍歷每一個VNode,用createElement函數(shù)在外層包裹class為control的p標簽，組成新的VNode數(shù)組
   const arry = this.$slots.default.map(VNode => {
    return createElement('p', {
     class: 'control'
    }, [VNode])
   })
   return createElement(
    'div', {
     class: this.groupClass
    }, arry,
   )
  },

渲染結果：

并且根據(jù)button-group的compact屬性可以切換不同的class，生成不同的效果

  {{item}}


  {{item}}

關于如何在vue中使用render渲染函數(shù)就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。