router-view孙子组件调用爷爷组件里的方法以及传参

最新推荐文章于 2024-02-26 18:12:38 发布
最新推荐文章于 2024-02-26 18:12:38 发布
阅读量1.7k 收藏 1
点赞数 1
分类专栏： Vue 文章标签： 组件化 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hh3167253066/article/details/120131988
版权
有个需求，孙子组件里有上传头像功能，在爷爷组件里用到了头像，所以想要孙子组件里上传完头像也能动态更新爷爷组件里的头像。

在Vue里用了router-view路由占位

1. 我的方法是先子组件上传头像成功后调用父组件里的方法userUgrzl
子组件(Ugrzl)里：

在这里插入图片描述

父组件(user)里

在这里插入图片描述
定义userUgrzl方法，触发父组件与爷爷组件的homeUser方法
在这里插入图片描述

爷爷组件里

在这里插入图片描述
定义homeUser方法实现功能
在这里插入图片描述

如果传参的话

使用router-view时组件之间的传值

hh3167253066
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中的router-view组件的使用教程
10-17
主要介绍了vue中的router-view组件的使用教程，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue父路由调用子路由方法及子路由调用父路由方法
weixin_52131798的博客
08-26 1526
父路由调用子路 合理运用ref属性 <template> <div> <router-view ref="Childmain"/> </div> </template> <script> created(){ this.$refs['Childmain'].childe() } </script> 调用时可能会出现报错,没猜错的话报错原因是子路由还未加载，这
vue中的router-view父子组件传参
qq_43958325的博客
12-16 1万+
router-view父子组件传参一、父组件传值给子组件二、子组件往父组件传值 一、父组件传值给子组件 父组件传递： <router-view :projectId="projectId"></router-view> 在data里存储的参数 data(){ return { projectId:'xxxxxxxx' } } 子组件接收: export default { prop:['projectId'], watch: { projectId:
Vue子路由怎么调用父路由中的方法和参数
weixin_45501830的博客
01-07 2601
问题:Vue中子路由怎么去调用父路由的方法和参数 思路: 直接在子路由的范围内使用this.$parent.xx即可调用对应父亲路由的参数。 使用this.$parent.xx()即可调用对应父亲路由的方法。 具体实现:直接贴入自己的测试页面就能看见效果了. <div id="app"> <router-link to="/son" tag="div"></router-link> <router-view></router-view
Vue3.x中子组件调用父组件的方法
世纪末的架构师的博客
08-07 4546
文章目录前言一、问题描述二、解决方法1. 问题原因2. 解决办法总结 前言 困难与折磨对于人来说，是一把打向坯料的锤，打掉的应是脆弱的铁屑，锻成的将是锋利的钢刀。 前端时间在开发项目时使用npm来自动创建vue cli项目，由于之前使用的Vue都是2.x的版本，现在通过npm自动导入的vue版本是3.x的，两个版本上的语法做了相应的调整与改变，无论是vue-router还是其他vue生态，都让我结结实实的踩了不少坑，也很庆幸从坑中爬了出来并在此留下记录，本文解决我当时在子组件中如何调用父组件中的方法。
使用router-view时组件之间的传值【Vue】
Umbrella_Um的博客
07-27 1638
1.子组件给父组件传值 -------------------父组件：----------------- <router-view @getShopCode='getShopCode'></router-view> methods:{ getShopCode(value){ conso.log(value); } } -------------------子组件：----------------- methods:{ goShop
vue3 父组件与路由子组件相互调用
pscool的博客
07-05 2585
Framework.vue中通过路由出口，展示了Main.vue组件，但是现在需要在Main.vue组件中去调用Framework.vue组件中的方法，可以有以下几种做法。
记录Vue中router-view子组件与父组件传值(webpack)
包子的博客
11-06 3077
记录Vue中router-view子组件与父组件传值应用情况页面代码一、子组件传值给父组件二、父组件传值给子组件 应用情况 为了避免在vue项目中每页都配置导航菜单，所以直接在app.vue中配置了导航菜单，但是发现当前激活菜单的 index虽然能在第一次选中是高亮，但是刷新页面后又会显示选中默认的index，如下情况： 刷新后(同一请求路径)： 找了好多地方发现可以按照下面的方法解决，分两种情况： 页面代码 首先是app.vue的代码 <template> <div id="
vue子组件调用父组件内的方法
星下云的博客
02-21 164
子组件调用父组件方法 随笔：后面时间充足了再补充 父组件 &lt;template&gt; &lt;div&gt; &lt;head-title3 ref="headerNews3"&gt;&lt;/head-title3&gt; &lt;router-view&gt;&lt;/router-view&gt; &lt;/div&am
[vue3] 子组件调用父组件的多种方法
热门推荐
wyy7293的博客
04-02 3万+
子组件调用父组件的方法 方法1 - 异步方式 父组件定义供子组件调用的xx方法 @updata:xx=xx 子组件中在setup的emit方法调用 context.emit(‘update:xx’) 注意: .sync 在这里不好用 父组件组件 <my-childe ref="RefChilde" @update:xx="xx[被子组件调用的自身方法]"></my-childe> 子组件组件 setup(props, context) { function fn
解决vue更新路由router-view复用组件内容不刷新的问题
10-16
今天小编就为大家分享一篇解决vue更新路由router-view复用组件内容不刷新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-router 中router-view不能渲染的解决方法
12-08
在使用vue-router的时候跳了一个很大的坑，router-view不能渲染，花费了好多时间终于发现了原因。 项目目录结构 其中main.js import Vue from 'vue'; import App from './App'; import router from './router'; /*...
vue2/vue3 通过ref调用router-view子组件的方法
最新发布
foreverhui的博客
02-26 436
有的时候，我们需要在当前组件组件中，调用路由子组件中的方法（之前都是直接引入的子组件，然后通过ref引用该子组件，然后通过ref直接调用，但是注意这里的区别是：路由子组件，而非在父组件中直接使用的子组件）不能直接在中直接使用ref然后调用，这里拿到的组件实例并非路由子组件，因而不能调用子组件中的方法。然后就可以在父级定义ref=childComponent的变量了，通过该变量访问子级路由的方法。首先，可以确定的是子组件必须将供外界调用的方法暴露出去。使用的组件写法，才可以使用ref引用到路由子组件。
vue 子路由如何调用父路由中的方法
weixin_46852620的博客
02-13 1700
在父路由界面中有部分是子路由的内容，而问题是子路由的操作完成后需要调用父路由的一个方法来改变父路由中的样式 main.js Vue.prototype.$bus = new Vue() 父路由页面 <template> <router-view></router-view> </template> export default { name: "father", mounted() { let _this = this
vue3 调用router-view下的组件方法
欢迎来到我的小世界
03-03 2325
vue3 调用router-view下的组件方法
router-view和父页面互调方法
sunshineTing2的博客
05-29 5096
子页面调父页面: this.$parent.fatherMethod() 父页面调子页面: this.$refs.childName.childMethod() parent 父页面 <div> <h1>父级页面</h1> <button @click="callChild">调用子页面方法</button> <button @click="beiChildMethod">被子页面调用方法</button&
vue-router父子组件传值及方法调用
qq_39176307的博客
05-07 1022
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、实现代码总结 前言 父子组件之间的传值和方法调用经常用到，导航栏的全局搜索就可以通过这个实现。简单写个demo练习一下。 一、实现代码 father.vue代码： <template> <div class="father"> <button v-on:click="runSonMd">调用子组件方法</button> <!--@faMethod=.
Vue中router-view和子路由的使用方法
如需咨询可联系我，V：chen2318341674
01-29 6207
语法场景：实现一个随着切换tab栏，头部底部不变，中间内容变得功能需求。 首先需要在路由文件中添加子路由（children）： import Vue from 'vue' import Router from 'vue-router' import Home from '../views/Home.vue' import Content1 from '../views/Content1.vue' import Content2 from '../views/Content2.vue' import Cont
VUE页面中加载外部HTML
hh3167253066的博客
10-04 9619
方法1，用iframe vue页面 <template> <button @click="invokeHtmlMethod">调用html种方法</button> <div class="iframestyleset"> <iframe name = "iframeMap" id="iframeMapViewComponent" v-bind:src="getPageUrl" width="1
vue3 router-view父子组件传参
11-03
Vue3中的router-view组件可以通过props接收父组件传递的参数。具体步骤如下： 1.在父组件中使用router-view组件，并通过props将参数传递给子组件，例如：<router-view :projectId="projectId"></router-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值