index.vue
<!-- 面包屑 -->
<Bread>
<BreadItem to="/">首页</BreadItem>
<BreadItem :to="`/category/${goods.categories[1].id}`">{
{ goods.categories[1].name }}</BreadItem>
</Bread>
需求:
1. 创建bread父容器
2. 获取默认插槽内容
3. 去除bread-item组件的i标签,应该由render函数来组织
4. 遍历插槽中的item,得到一个动态创建的节点,最后一个item不加i标签
5. 把动态创建的节点渲染在bread标签中
bread.vue
// h 第一个参数 标签名字 第二个参数 标签属性对象 第三个参数 子节点
// 返回值就是组件内容
<script>
import { h } from 'vue'
export default {
name: 'Bread',
render () {
const items = this.$slots.default()
const dynamicItems = []
items.forEach((item, i) => {
dynamicItems.push(item)
if (i < (items.length - 1)) {
dynamicItems.push(h(