IT教程 ·

谈谈Vue的递归组件

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

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

 

什么是递归组件

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

代码构造也许长下面这模样,须要注重递归组件与平常组件差别的处所是,你须要给组件供应一个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实现继承的方法

参与评论