个人笔记
项目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前端笔记(父组件与子组件通信)

相关文章:

  • 2021-10-24
  • 2022-12-23
  • 2021-08-07
  • 2021-05-19
  • 2022-12-23
  • 2022-12-23
  • 2022-01-21
  • 2022-12-23
猜你喜欢
  • 2021-05-08
  • 2022-12-23
  • 2022-12-23
  • 2021-09-28
  • 2022-02-02
  • 2021-11-14
  • 2021-08-31
相关资源
相似解决方案