第十三课时:递归组件的使用-白红宇

第十三课时:递归组件的使用

阅读量：5967 次

发布时间：2019-06-19

本文共 1211 字，大约阅读时间需要 4 分钟。

递归组件的使用

1. 封装简单的Menu组件

一个子组件就相当于一个父组件的html标签

父组件: menu-page.vue

子组件: a-menu.vue、a-menu-item.vue、a-submenu.vue

还有个暴露子组件的index.js

先上一张最后渲染的结果:

menu-page.vue

a-menu.vue

a-menu-item.vue

a-submenu.vue

index.js

import AMenu from './a-menu.vue'import AMenuItem from './a-menu-item.vue'import ASubmenu from './a-submenu.vue'export default{  AMenu,  AMenuItem,  ASubmenu}

2.递归组件

子组件不断调用自身(需要组件有name属性),接上面组件的例子,修改menu-page.vue,新增re-subname.vue

最后渲染的效果图

menu-page.vue

re-subname.vue

转载地址：http://ottax.baihongyu.com/

你可能感兴趣的文章

【Kernal Support Vector Machine】林轩田机器学习技术

查看>>

CSS+DIV学习笔记——页面布局

查看>>

让所有浏览器支持HTML5 video视频标签

查看>>

Socket 详解

查看>>

[Android Pro] Java进阶学习:jar打包详解

fiddler(二)、配置抓取https协议

查看>>

php环境配置

查看>>

zabbix专题：第十二章 zabbix proxy分布式监控配置

查看>>

tar 命令的详解

查看>>

Android Studio第二十七期 - RecycleView不同item布局

Python内置容器（2）——字典，迭代器，列表解析

查看>>

那年匆匆 -大学

查看>>

Internet 打印提示“打印机安装失败、打印机名称无效”的解决

查看>>

从Powershell ***脚本学到的如何执行后台runspace~

查看>>