vue递归组件如何传递事件,vue递归菜单
本文主要介绍vue递归组件的简单使用示例，帮助您更好地理解和使用vue框架。感兴趣的朋友可以了解一下。
前言
相信很多同学对递归都很熟悉。我们经常用递归来解决算法中的问题。比如classic:从一个所有数字的数组中找出加性能量等于目标数的组合。这个想法也不难。循环数组值递归相加，直到满足目标数条件。虽然递归可以解决大部分问题，但缺点是容易写出无限循环代码，导致栈爆炸。递归在vue组件中的应用在我的实际业务场景中有描述。
在vue中使用
要完成一个完整的递归，我个人认为最重要的有两点：
确定进入递归的条件；
确定跳出递归的条件；
最重要的是确定什么时候跳出递归。递归组件其实很简单，就是在组件A中再次调用组件A，形成一个递归。以下面我遇到的业务为例。某天收到一个需求，需要根据标签条件的不同组合，从一堆用户中筛选出目标用户。因此，有如下设计图纸：
乍一看，你可能会目瞪口呆，但其实仔细分析，不难发现。看图片，很多同学会觉得有点像我们常说的娃娃，一层一层的。对于这种图，我们首先分析最小单位是哪一个。很容易看出最小的就是上图中的这个。图中的大结构基本上都是由这一小块组成的。只要先实现这一块，剩下的无非就是递归逐层渲染数据。
接下来无非就是判断数据结构。如果没有子树，就直接渲染项目。如果一个项包含一个子树，则需要重新呈现组件并传递子数据。所以想法其实很简单。假设我们的数据结构如下：
{
类型：或，
值列表：[
{
条件：“过去7天的登录次数”，
登录：！=,
价值：45英镑
},
{
条件：“过去7天的登录次数”，
登录：！=,
价值：45英镑
},
{
键入：“和”
值列表：[
{
条件：“过去7天的登录次数”，
登录：！=,
价值：45英镑
}
]
}
]
}
上面的数据结构非常清晰，可以看出当数组中的子项包含valueList时，表示需要重新渲染上图中提到的一个小组件。因此，我们可以简单地编码如下(以下代码仍有优化空间):
模板
div class=标签列表
El-tag type= primary size= mini class= logic { { typedic[treedata . type]} }/El-tag
treedata.valueList中的模板v-for=(item，index
ul v-if=！item . hasownproperty( value list ):key= rule _ index
Li { { item . condition } } { { item . logic } } { { item . value } }/Li
/ul
/模板
treedata.valueList中的模板v-for=(item，index
！-这里判断有valuelist，所以再次调用渲染组件渲染子项-
label-shows-view v-if= item . hasownproperty( value list ):key= tree _ index :treedata= item /label-shows-view
/模板
/div
/模板
脚本
const _TYPE={
和:和，
或:或
}
导出默认值{
名称：标签显示视图，
道具：{
treedata: {
类型：对象，
必填：真
}
},
data() {
返回{
typedic:_ TYPE
}
}
}
/脚本
不难看出，主要是分析找出数据结构中的重复部分，并逐层渲染。其实很好理解，上面的例子是纯粹的展示。如果有数据交互，就需要格外注意。如果递归层次较深，事件传输、数据更改等。需要小心处理。比如，当笔者做完上面的视觉配置，筛选客户群时，就遇到了下图：
您可以添加和删除子项，也可以拖放每个组来调整其位置。这时候可以用一个类似气泡的方法，子组件触发事件，接受事件。例如，删除某一组条件时，需要通知父组件要删除哪一项子数据，如下所示：
！- labelRulesView.vue -
！-这个自定义组件就是这个组件，也就是递归组件-
label-rules-view v-if= item . hasownproperty( value list ):label-list= label list :treedata= item :current-index= index @ del group= fundel group /label-rules-view
！-该组件侦听delGroup事件-
El-button size= mini type= danger icon= El-icon-delete class= operate-BTN @ click= handleDelNewGroup(current index)/El-button
//删除一个组
handleDelNewGroup(索引){
这个。$emit(delGroup ，index) //将事件触发到上层组件
},
基金组(指数){
this . treedata . value list . splice(index，1)
},
在递归组件中，该组件通常同时充当子组件和父组件。因此，需要控制数据之间的交互，否则，很容易出现数据混乱。
小结
本文是作者在实际业务场景中撰写的。通过使用递归组件，我们甚至可以完成一些复杂的图形显示。希望能帮你拓宽思路。如果我能帮到你，请小心(下次拒绝确定[doge])
以上是vue递归组件的简单使用实例的详细说明。更多关于vue递归组件的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。