谈谈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实现继承的方法