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

个人笔记
项目demo7

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

引用

web前端笔记(父组件与子组件通信)
components
web前端笔记(父组件与子组件通信)
date数据
web前端笔记(父组件与子组件通信)
template中传输数据
web前端笔记(父组件与子组件通信)

top-menu中使用props接收
web前端笔记(父组件与子组件通信)

在top-menu v-for使用
web前端笔记(父组件与子组件通信)

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

子组件中使用this.¥emit(“名称”,值)
web前端笔记(父组件与子组件通信)
父组件添加事件(@+传过来的名称)
web前端笔记(父组件与子组件通信)在父组件methods中接收(需在date中新建menusindex值,与子组件中的menusindex名称相同)
web前端笔记(父组件与子组件通信)

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

4个菜单页显示图片数据
web前端笔记(父组件与子组件通信)
根据子组件传过来的当前菜单页数判断使用哪个菜单页
web前端笔记(父组件与子组件通信)

使用component 及:is 渲染页面
web前端笔记(父组件与子组件通信)

以上均需引用必要文件vue
web前端笔记(父组件与子组件通信)
components
web前端笔记(父组件与子组件通信)

显示效果

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

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