web前端笔记(父组件与子组件通信)

个人笔记
项目demo7

1.父组件与子组件之间传递数据

引用

在这里插入图片描述
components
在这里插入图片描述
date数据
在这里插入图片描述
template中传输数据
在这里插入图片描述

top-menu中使用props接收
在这里插入图片描述

在top-menu v-for使用
在这里插入图片描述

2.子组件向父组件传数据:当前点击的是第几个页面

子组件中使用this.¥emit(“名称”,值)
在这里插入图片描述
父组件添加事件(@+传过来的名称)
在这里插入图片描述在父组件methods中接收(需在date中新建menusindex值,与子组件中的menusindex名称相同)
在这里插入图片描述

3.根据传过来的值变更菜单页面

4个菜单页显示图片数据
在这里插入图片描述
根据子组件传过来的当前菜单页数判断使用哪个菜单页
在这里插入图片描述

使用component 及:is 渲染页面
在这里插入图片描述

以上均需引用必要文件vue
在这里插入图片描述
components
在这里插入图片描述

显示效果

在这里插入图片描述

在这里插入图片描述