封装一个高复用的面包屑组件，适用于多级场景
在封装面包屑组件发现，简单封装的面包屑组件的时候如果最后一个选项后不需要箭头，还需要单独进行样式更改，并且如果需要在中间的某一个选项需要进行特殊样式，则更加复杂，这种只适用于两级场景，多级场景下就不能使用。
因此选择封装一个高复用的面包屑组件，能适用于多级场景，用到了 render 选项和 h 函数。
参考element的面包屑组件，不需要对不同要求再进行专门设计，这正是我需要的。
通过bread和bread-item两个组件进行演示：（以下基于vue3.0，所有组件都定义为全局组件）
1.bread-item.vue
<template>
<div class="bread-item">
<RouterLink v-if="to" :to="to"><slot /></RouterLink>
<span v-else><slot /></span>
</div>
</template>
<script>
export default {
name: 'BreadItem',
props: {
to: {
type: [String, Object],
default: ''
}
}
}
</script>
<style></style>
此处并不需要加入箭头，如果在此处加上则最后会多出一个不需要的箭头，将箭头在render中动态渲染就好了
2.bread.vue
<script> import { h } from 'vue' export default { name: 'Bread', render() { const items = this.$slots.default() const dymanicItems = [] items.forEach((item, i) => { dymanicItems.push(item) if (i < items.length - 1) { dymanicItems.push(h('i', { class: 'arrow' })) } }) return h('div', { class: 'bread' }, dymanicItems) } } </script> <style lang="less"> .bread { display: flex; padding: 25px 10px; &-item { a { color: #666; transition: all 0.4s; &:hover { color: @xtxColor; } } } i { font-size: 12px; margin-left: 5px; margin-right: 5px; line-height: 22px; } } </style>
此处样式没有scoped，是为了里面的bread-item插槽也能使用
index.vue
<template>
<div class="top-category">
<div class="container">
<!-- 面包屑 -->
<Bread>
<BreadItem :to="{ path: '/' }">首页</BreadItem>
<BreadItem to="/category">页面1</BreadItem>
<BreadItem>页面2</BreadItem>
</Bread>
</div>
</div>
</template>
<script>
export default {
name: 'TopCategory'
}
</script>
<style></style>
最后在使用的时候就和element上的面包屑组件一样，需要跳转就加一个to
分析一下bread.vue中的代码
<script> import { h } from 'vue' export default { name: 'Bread', render() { const items = this.$slots.default() const dymanicItems = [] items.forEach((item, i) => { dymanicItems.push(item) if (i < items.length - 1) { dymanicItems.push(h('i', { class: 'arrow' })) } }) return h('div', { class: 'bread' }, dymanicItems) } } </script>
这里用到了creatElement函数和render选项
在Vue中指定组件显示的内容：new Vue({选项})，有三种方式
- el 选项，通过一个选择器找到容器，容器内容就是组件内容
- template 选项，
<div>组件内容</div>作为组件内容 - render选项，它是一个函数，函数回默认传入createElement函数（h函数），这个函数用来创建结构，再render函数返回渲染为组件内容。它的优先级更高。
vue官方对render选项的解释是：字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。
render函数的返回值就是html结构
在大多数情况下，我们可以使用模板创建HTML，但一些特殊情况下使用模板较为繁琐，可以使用渲染函数来解决
h函数有三个参数 1.节点名称 2.属性｜数据 (对象) 3. 子节点，例如：h('div', { class: 'bread' }, "例子")，生成的就是 <div class="bread">例子</div>
在上述代码中，items是通过this.$slots.default()获取的所有插槽组成的数组，dymanicItems就是动态渲染的箭头图标
通过遍历items得到每一个插槽将其与箭头图标依次组合，并通过if判断去掉最后一个箭头，就完成了 首页>页面1>页面2 这样的结构
更多内容和例子可以参考vue官方文档
