详解vue渲染函数render的使用(2)

所以第一步

  render(createElement) {
   return createElement(
    'div', {
     class: this.groupClass
    }, '内容',
   )
  }

渲染结果:

那怎样在外层div中渲染button组件呢?

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

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

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

渲染结果:

 

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

  render(createElement) {
   //遍历每一个VNode,用createElement函数在外层包裹class为control的p标签,组成新的VNode数组
   const arry = this.$slots.default.map(VNode => {
    return createElement('p', {
     class: 'control'
    }, [VNode])
   })
   return createElement(
    'div', {
     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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持黑区网络。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/944.html