vue面包屑组件封装-render选项与h函数

关于render

• el 选项，通过一个选择器找到容器，容器内容就是组件内容
• template 选项，<div>组件内容</div> 作为组件内容
• render选项，它是一个函数，函数回默认传人createElement的函数（h），这个函数用来创建结构，再render函数返回渲染为组件内容。它的优先级更高。

基本结构

首先创建两个组件，组件分别进行全局注册

xtx-bread.vue

<script>
import { h } from 'vue'
export default {
  name: 'XtxBread',
  render () {
    /**
     * 用法
     * 1.template标签去除，单文件组件
     * 2.返回值就是组件内容
     * 3.vue2的h函数是传参进来，vue3的h函数需要导入进来
     * 4.h的第一个参数 标签名字 第二个 标签属性对象 第三个 子节点
     */
    /**
     * 需求
     * 1.创建xtx-bread父容器
     * 2.获取默认插槽内容
     * 3.去除xtx-bread-item组件的i标签 应该由reader函数创建
     * 4.遍历插槽中的item得到一个动态创建的节点 最后一个item不加i标签
     * 5.把动态创建的节点渲染在xtx-bread标签中
     */
    // 获取到indexView传来的插槽
    const items = this.$slots.default()
    const dynamicItem = []
    items.forEach((item, i) => {
      dynamicItem.push(item)
      if (i < items.length - 1) dynamicItem.push(h('i', { class: 'iconfont icon-angle-right' }))
    })
    return h('div', { class: 'xtx-bread' }, dynamicItem)
  }
}
</script>

<style lang='less'>
// 不使用scope 让样式作用到xtx-bread-item
.xtx-bread{
  display: flex;
  padding: 25px 10px;
  &-item {
    a {
      color: #666;
      transition: all .4s;
      &:hover {
        color: #27BA9B;
      }
    }
  }
  i {
    font-size: 12px;
    margin-left: 5px;
    margin-right: 5px;
    line-height: 22px;
  }
}
</style>

xtx-bread-item.vue

<template>
  <div class="xtx-bread-item">
    <RouterLink v-if="to" :to="to"><slot /></RouterLink>
    <span v-else><slot /></span>
  </div>
</template>
<script>
export default {
  name: 'XtxBreadItem',
  props: {
    to: {
      type: [String, Object]
    }
  }
}
</script>

组件中使用

<XtxBread>
  <XtxBreadItem :to="{path: '/'}">首页</XtxBreadItem>
  <XtxBreadItem :to="{path: '/category/100500'}">电器</XtxBreadItem>
  <XtxBreadItem>电饭锅</XtxBreadItem>
</XtxBread>

效果

• 总结，一下知识点

  • render 是vue提供的一个渲染函数，优先级大于el,template等选项，用来提供组件结构。

  • 注意：

    • vue2.0 render函数提供h（createElement）函数用来创建节点
    • vue3.0 h（createElement）函数有 vue 直接提供，需要按需导入

  • this.$slots.default() 获取默认插槽的node结构，按照要求拼接结构。

  • h函数的传参 tag 标签名|组件名称, props 标签属性|组件属性, node 子节点|多个节点

• 注意：不要在 xtx-bread 组件插槽写注释，也会被解析。