当前位置: 开发笔记 > 后端 > 正文

vue中routerview子传父通信（以折叠左侧导航栏为例说明）

作者：Ww不孤单_584 | 来源：互联网 | 2023-10-10 19:50

vue中router-view子传父通信（以折叠左侧导航栏为例说明）-问题描述平常我们子传父，都是写在组件上，写在router-view视图层上的并不多。实际上写在router-v

问题描述

平常我们子传父，都是写在组件上，写在router-view视图层上的并不多。实际上写在router-view视图层上基本上一样的。本篇文章就记录一下用法。以折叠左侧导航栏为例。

布局图示

代码步骤图示

二者关系为父子组件关系

最终效果图

总结

记录一下，留作备用

推荐阅读

view
1 Vue基础

Vue基础一、什么是Vue1.1概念Vue(读音vjuː，类似于view)是一套用于构建用户界面的渐进式JavaScript框架，与其它大型框架不 ... [详细]

蜡笔小新 2023-10-17 19:45:53
view
Vue项目中结合Element UI解决连续上传多张图片及图片编辑问题

本文介绍了在Vue项目中如何结合Element UI解决连续上传多张图片及图片编辑的问题。作者强调了在编码前要明确需求和所需要的结果，并详细描述了自己的代码实现过程。 ... [详细]

蜡笔小新 2023-12-13 13:42:30
缓存
单页面应用 VS 多页面应用的区别和适用场景

本文主要介绍了单页面应用（SPA）和多页面应用（MPA）的区别和适用场景。单页面应用只有一个主页面，所有内容都包含在主页面中，页面切换快但需要做相关的调优；多页面应用有多个独立的页面，每个页面都要加载相关资源，页面切换慢但适用于对SEO要求较高的应用。文章还提到了两者在资源加载、过渡动画、路由模式和数据传递方面的差异。 ... [详细]

蜡笔小新 2023-12-10 19:31:50
缓存
wpf+mvvm代码组织结构及实现方式

本文介绍了wpf+mvvm代码组织结构的由来和实现方式。作者回顾了自己大学时期接触wpf开发和mvvm模式的经历，认为mvvm模式使得开发更加专注于业务且高效。与此同时，作者指出mvvm模式相较于mvc模式的优势。文章还提到了当没有mvvm时处理数据和UI交互的例子，以及前后端分离和组件化的概念。作者希望能够只关注原始数据结构，将数据交给UI自行改变，从而解放劳动力，避免加班。 ... [详细]

蜡笔小新 2023-12-10 10:07:44
缓存
HashRouter 改为 Router 就全部空白页了。也不报错。

本文讨论了将HashRouter改为Router后，页面全部变为空白页且没有报错的问题。作者提到了在实际部署中需要在服务端进行配置以避免刷新404的问题，并分享了route/index.js中hash模式的配置。文章还提到了在vueJs项目中遇到过类似的问题。 ... [详细]

蜡笔小新 2023-12-09 10:26:51
server
Vue模拟数据,实现路由进入商品详情页面的示例

一、路由首先需要配置路由，就是点击good组件进入goodDetail组件配置路由如下{path:goodDetail,component:goodDetail}同时在good组件中写入如下点击事件，路由中加入 ... [详细]

蜡笔小新 2023-10-17 20:25:16
server
【前端工具】nodejs+npm+vue 安装（windows）

预备先看看这几个是干嘛的，相互的关系是啥。nodejs是语言，类比到php。npm是个包管理，类比到composer。vue是个框架&# ... [详细]

蜡笔小新 2023-10-17 20:02:12
server
504 Gateway Timeout的解决方法

1、etcnginxconf.ddefault.conf，添加如下信息：location{try_files$uri$urirouter;rootho ... [详细]

蜡笔小新 2023-10-17 17:14:08
server
关于vue router得路由刷新问题

有两个路由 ... [详细]

蜡笔小新 2023-10-17 15:19:46
server
工作章vue组件返回时保留滚动的位置

最近做项目时遇到一个问题，产品搜索后出来相关的列表，点击相关商品进入它的详情，返回后组件被重新创建，但产品需求是需要保留进入 ... [详细]

蜡笔小新 2023-10-16 14:59:32
redis
shirovue前后端分离中模拟登录遇到的坑

系统采用jeeplus框架（ssm+redis+shiro+mongodb+redis）,默认是做了JSP未做前后端分离，由于业务需要已经多终端使用的需求（H5、小程序等） ... [详细]

蜡笔小新 2023-10-16 10:52:05
redis
Vue案例（搜索页面）

<!DOCTYPEhtml><htmllang=en><head><metacharset=UT ... [详细]

蜡笔小新 2023-10-16 06:20:19
redis
Vue3教程：开发一个Vue3+elementplus的后台管理系统

最近在开发一个Vue3.0+element-plus练手项目，后面测试完成后，会把代码全部开源，部分页面的预览图如下：本来是这周一发的文章，但是博客园当时在维护，所以 ... [详细]

蜡笔小新 2023-10-15 13:05:50
asp.net
基于layUI的图片上传前预览功能的2种实现方式

本文介绍了基于layUI的图片上传前预览功能的两种实现方式：一种是使用blob+FileReader，另一种是使用layUI自带的参数。通过选择文件后点击文件名，在页面中间弹窗内预览图片。其中，layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块，并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]

蜡笔小新 2023-12-14 17:06:58
asp.net
如何在不使用SearchBar display controller的情况下单独使用SearchBar并捕获其textChange事件？

本文讨论了如何在不使用SearchBar display controller的情况下，单独使用SearchBar并捕获其textChange事件。作者介绍了实际状况，即左侧SliderMenu中的SearchBar需要在主页TableView中显示搜索结果。然后，作者提供了解决方案和步骤，帮助读者实现这一功能。 ... [详细]

蜡笔小新 2023-12-14 13:24:28

Ww不孤单_584

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章