render函数封装

另类组件封装

• 以render函数封装

  render:为了创建虚拟dom,它return什么,页面就渲染什么,它return的值也要是虚拟dom

1. 封装一个面包屑item项组件,接收一个to参数

<template>
  <span>
    <router-link v-if="to" :to="to">
      <slot />
    </router-link>
    <span v-else><slot /></span>
  </span>
</template>
<script>
export default {
  name: 'BreadcrumbItem',
  props: {
    to: {
      type: [Object, String],
      default: ''
    }
  }
}
</script>
<style></style>

2. 使用面包屑item组件

<template>
  <div>
    <Breadcrumb>
      <BreadcrumbItem to="/">首页</BreadcrumbItem>
      <BreadcrumbItem to="/departments">活动列表</BreadcrumbItem>
      <BreadcrumbItem>活动详情</BreadcrumbItem>
      <BreadcrumbItem>活动详情</BreadcrumbItem>
      <BreadcrumbItem>活动详情</BreadcrumbItem>
      <BreadcrumbItem>活动详情</BreadcrumbItem>
    </Breadcrumb>
    <!-- <HmMessage /> -->
  </div>
</template>
<script>
export default {}
</script>
<style></style>

3. 封装render函数
   

<script>
export default {
  name: 'Breadcrumb',
  functional: true,
  render: (h, context) => {
    //   context.slots().default获取默认插槽内的虚拟dom，它是一个数组
    console.log('context', context.slots().default)
    //  <i class="el-icon-arrow-right" />  h('i',{class:'el-icon-arrow-right'})
    const vnodeArr = []
    context.slots().default.forEach((item, index, arr) => {
      vnodeArr.push(item)
      //   不是最后一项时才添加  >  图标
      if (arr.length - 1 !== index) {
        vnodeArr.push(h('i', { class: 'el-icon-arrow-right' }))
      }
    })
    return h('span', {}, vnodeArr)
  }
}
</script>
<style></style>