Vue递归组件

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

起源

为什么会想起做组件递归呢。因为在看同事的代码时，相同的数据结构，进行了C V操作。另外一个原因呢，是我在看Vue文档时，发现了他。处理边界条件 还是比较隐蔽。如果不仔细看，还是不好发现的。

解决

Vue递归组件 没有写复杂的样式。虽然样式丑了一些，重要的是讲明白其中的道理就好。

组件

一个完整的组件，基本包括模板、属性和事件。

模板

1. 这里我用的就是template,就是页面的基本骨架。就是html页面。写好模板之后，在后续进行数据循环处理。
2. 除了基本的骨架外，我们还可以借助Vue的插槽，实现模板的自定义。插槽。
3. 还有高级的用户，我们可以使用jsx，自定义生成Vnode。render。

属性

1. 父子组件之间的数据传输。Props。戳这里 。

事件

1. 父子组件之间进行数据交互。戳这里.

实现思路

1. 定义组件，name属性是必须的。作为组件的唯一值。
2. template，定义模板骨架。Vue数据驱动的思想，进行循环展示。
3. 数据来源，Props。
4. 既然是递归组件，就需要有条件判断，进行退出。重点标记

<template>
  <p>
    <span>{{ folder.name }}</span>
    <ul>
      <li v-for="child in folder.children">
        <tree-folder v-if="child.children" :folder="child" />
        <span v-else>{{ child.name }}</span>
      </li>
    </ul>
  </p>
</template>

总结

虽然我们在业务开发中，都是使用的UI库，但是难免有一些，让人头疼的需求。如果你遇到了类似的问题，可以参考一下我这里的实现方式。