vue递归组件如何传递事件,vue递归组件 n级联动
目中出现多级菜单时，需要多层为循环时，但是当菜单增加层级时，需要在页面结构中增加一层为循环，这时我们可以使用组件递归的思想来实现，下面这篇文章主要给大家介绍了关于某视频剪辑软件业务实例之组件递归及其应用的相关资料，需要的朋友可以参考下
目录
递归简介某视频剪辑软件实现组件递归调用效果及代码组件递归案例递归实现菜单栏调用效果及代码递归生成菜单仓库源码总结
递归简介
含义：程序调用自身的编程技巧称为递归，那组件调用自身就是组件递归
应用场景：在实际业务开发中，通常应用于菜单栏、树组件、多级下拉框等
vue实现组件递归
调用效果及代码
！-
* @日期：2020-12-09 17:52:54
* @作者：瑟温840325271@qq.com
* @ LastEditTime:2022-05-10 14:14:15
* @最后的编辑：瑟温840325271@qq.com
* @描述：调用页面
-
模板
div class=
div v-for=(item，index) in testList :key=index
测试：listitem=item /
/div
/div
/模板
脚本
从导入测试.测试。vue ；
导出默认值{
组件：{
测试，
},
道具：[],
data() {
返回{
测试列表：[
{
名称： 你好啊，
值："1",
儿童：[
{
名称： 你好啊，
值："1-1",
},
{
名称： 你好啊，
值："1-2",
儿童：[
{
名称： 你好啊，
值："1-2-1",
},
],
},
],
},
{
名称： 好的呢，
值："2",
孩子：[],
},
],
};
},
已安装(){},
观察：{},
方法：{},
};
/脚本
样式lang=scss 范围。许可菜单{
宽度：200像素
}
/风格
组件递归案例
需要递归的组件，必须写组件名姓名，可以在代码中直接使用名字进行调用
！-
* @日期：2022-05-10 11:30:50
* @作者：瑟温840325271@qq.com
* @ LastEditTime:2022-05-10 14:15:09
* @最后的编辑：瑟温840325271@qq.com
* @描述：组件递归案例
-
模板
div class=test-root
{ { ` $ { listitem。value }:$ { listitem。name } `} }
listitem中的div v-for=(item，index)。“children”:key=“index”
！-直接使用自身组件-
测试：listitem=item /
/div
/div
/模板
脚本
导出默认值{
//必须写名字
名称："测试",
组件：{},
道具：[listitem]，
data() {
return { }；
},
已安装(){},
观察：{},
方法：{},
};
/脚本
样式lang=scss 范围。测试根{
填充：20px
显示：内嵌-块；
边框：1px固体# 409eff
边距：10px 0；
}
/风格
递归实现菜单栏
调用效果及代码
！-
* @日期：2020-12-09 17:52:54
* @作者：瑟温840325271@qq.com
* @ LastEditTime:2022-05-10 14:20:32
* @最后的编辑：瑟温840325271@qq.com
* @描述：调用页面
-
模板
div class=
el-menu class=p-el-menu
Menutree :menuList=menuList /
/el-menu
/div
/模板
脚本
从导入菜单树/p-El-menu。vue ；
导出默认值{
组件：{
Menutree，
},
道具：[],
data() {
返回{
菜单列表：[
{
标签: 菜单1,
值："1",
儿童：[
{
标签: 菜单1-1,
值："1-1",
},
{
标签: 菜单1-2,
值："1-2",
儿童：[
{
标签: 菜单1-2-1,
值："1-2-1",
},
],
},
],
},
{
标签: 菜单2,
值："2",
儿童：[],
},
{
标签: 菜单3,
值："3",
儿童：[
{
标签: 菜单3-1,
值："3-1",
},
],
},
],
};
},
已安装(){},
观察：{},
方法：{},
};
/脚本
样式lang=scss 范围。许可菜单{
宽度：200像素
}
/风格
递归生成菜单
！-
* @日期：2022-05-10 11:45:08
* @作者：瑟温840325271@qq.com
* @ LastEditTime:2022-05-10 14:28:58
* @最后的编辑：瑟温840325271@qq.com
* @描述：递归生成菜单
-
模板
div class=
div v-for=(menu，index) in menuList :key=index
el-menu-item v-if=！菜单。儿童 菜单。孩子。length==0:index=菜单。“价值”
I:菜单。图标？menu.icon : el-icon-menu/i
span slot= title class= group _ title { menu。label } }/span
/El-菜单项
埃尔-子菜单v-else :index=menu.value
模板槽=标题
I:菜单。图标？menu.icon : el-icon-menu/i
span{{ menu.label }}/span
/模板
！-递归自身-
p-El-menu:菜单列表= menu。儿童/
/El-子菜单
/div
/div
/模板
脚本
导出默认值{
//必须写名字
名称： p-el-menu ，
组件：{},
道具：[menuList]，
data() {
return { }；
},
已安装(){},
观察：{},
方法：{},
};
/脚本
样式lang=scss 范围
/风格
仓库源码
某视频剪辑软件组件递归
总结
到此这篇关于某视频剪辑软件业务实例之组件递归及其应用的文章就介绍到这了，更多相关某视频剪辑软件组件递归及应用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。