谈谈Vue的递归组件

记录一下自己写PHP程序时走过的一些坑

2月末了一天，而且还四年一遇，但是本月竟然一篇博客没写，有点说不过去。所以，本日就来谈谈Vue的递归组件。我们先来看一个例子：

什么是递归组件

上面这个例子，就是用递归组件完成的。递归组件，望文生义，就是本身的内部完成又挪用本身的组件。比方Vue官方给的，父目次下有子目次，子目次下另有子目次，子子孙孙，无穷尽也。就像俄罗斯套娃。

代码构造也许长下面这模样，须要注重递归组件与平常组件差别的处所是，你须要给组件供应一个name选项，防备Vue编译的时刻，将内部挪用的Example组件认为是未定义组件，固然，你也能够直接将组件注册未一个全局组件。

// example组件的完成
<template>
<div>
  ...
   <Example></Example>
  ...
</div>
</template>

<script>

export default {
    name: 'Example' // 主要
}
</script>

递归组件的运用场景

除了上述的树形视图外，批评也是一个不错的运用场景，比方网易消息的批评复兴功用。或许一个包括父使命和多级子使命的todolist，总之，递归组件合适那些在UI上有父子关系的场景。

写一个递归组件

实在，除了前面所说的name选项是必需的以外，另有一点也是在完成递归组件要注重的，就是要防备无穷递归，形成挪用栈溢出。上面说的子子孙孙，无穷尽也，说说能够，但是浏览器受不了啊。这就要依据现实场景来剖析递归的停止前提。接下来，我们来写一个递归组件。

上面的demo完成了一个模仿dom事宜冒泡的操纵，当点击中间圆时，事宜逐级通报，然后转变div的色彩，直到冒泡到最顶层。这里依据设置圆的数目举行递归，递归的停止前提是直到数目减到1：

<template>
...
    <colorful-circle 
         v-if="count > 1" // 掌握递归前提
         :count="count - 1" // 每向下一层，count减1
         @colorChange="handleColor" 
    ></colorful-circle>
...
</template>

递归组件在事宜监听上也是一个有意思的处所，你能够一层一层接力，直到将事宜冒泡到最顶层。代码片断以下：

<template>
...
    <colorful-circle 
         v-if="count > 1" 
         :count="count - 1"
         @colorChange="handleColor" // 监听子colorful-circle组件发出的事宜
    ></colorful-circle>
...
</template>

<script>
name: 'colorful-circle',
...
methods: {
...
    handleColor(c) {
      this.color = Color(c).darkenByAmount( .05 ); // 在本层组件转变色彩
      setTimeout(() => {
        this.$emit('colorChange', this.color); // 把事宜再冒泡到上一层组件
      },100)
    },
}
...
</script>

悉数代码可到上面的codepen中检察，人人周末兴奋。2020.02.29（本文完）

作为前端，你需要懂得javascript实现继承的方法