vue Render函数的使用方法

image.png

原来代码

<script>
  export default {
    name: 'Item',
    functional: true,
    props: {
      icon: {
        type: String,
        default: ''
      },
      title: {
        type: String,
        default: ''
      }
    },
    render(h, context) {
      const { icon, title } = context.props
      const vnodes = []
 
      if (icon) {
        vnodes.push(<svg-icon icon-class={icon}/>)
      }
 
      if (title) {
vnodes.push(<span slot='title'class='system-menu-title'>{(title)}</span>)
      }
      return vnodes
    }
  }
</script>

改进之后

const { icon, title } = context.props
    const vnodes = []
    if (icon) {
      const elHtml  = createElement('svg-icon',{
        attrs: {
          'icon-class': icon
        }
      })
      vnodes.push(elHtml)
    }
    if (title) {
      const elHtml  = createElement('span',{
        attrs: {
          slot: title,
        }
      },title)
      vnodes.push(elHtml)
    }
    return vnodes
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。