vue组件孙子调用爷爷的方法

最新推荐文章于 2024-11-30 10:30:05 发布

原创最新推荐文章于 2024-11-30 10:30:05 发布 · 4.3k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍了如何在Vue应用中通过provide/inject实现组件间的通信。具体步骤包括在爷爷组件中使用provide暴露自定义方法saveFun，然后在孙子组件中通过inject注入并直接调用该方法，实现跨层级的通信功能。

1、在爷爷组件中设置provide(){ return{ saveFun:this.saveFun } },
saveFun我自己的方法 provide和methods同级
2、直接在孙子组件中设置inject:['saveFun'],
inject data同级
剩下的就是直接调用saveFun这个方法了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

最美不过初相见^_^

关注关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue 孙组件调用父组件的方法

yxp 的博客

05-11

711

通过组件内的 @ 传递方法名称，可以实现孙组件调用父组件。'显示来自父组件的参数：''父组件的方法被调用'// 触发父组件的方法。父组件 m1.vue。子组件 m2.vue。孙组件 m3.vue。

Vue组件通信06-多层级组件通信（爷爷到孙子-传值）-provide&inject

caoxinjian423的博客

10-08

1259

components/Parent.vue <template> <div> 我是父组件 <Son></Son> </div> </template> <script> /* provide：Object | () => Object inject：Array<string> | { [key: string]: string | Symbol | Ob

1 条评论您还未登录，请先登录后发表或查看评论

【Vue2】父子组件传参 && 孙子调用爷爷的方法 provide inject

weixin_47375144的博客

06-08

4523

这里切记：通过props接受到的值是不能改变的，如果要改变只能重新再子组件定义，然后通过watch将父组件的值传给该定义好的属性，即可渲染。若inject:[‘方法名报错’]，则可更改为。provide抛出去。

vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)

10-15

主要介绍了vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

Vue 之孙组件向爷组件通信的实现

10-17

主要介绍了Vue 之孙组件向爷组件通信的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

vue组件孙组件调用爷组件（祖父组件）的方法

最新发布

01-17

### Vue 中实现孙子组件调用爷爷组件的方法在 Vue 应用程序中，可以通过多种方式实现在孙子组件内调用爷爷组件中的方法。以下是几种常见的解决方案： #### 使用 Provide/Inject API Provide 和 Inject 是一种父子...

Vue组件通信09-多层级组件通信（爷爷到孙子-传方法）-$listener

caoxinjian423的博客

10-08

1115

components/Parent.vue <template> <div> 我是父组件 <br> 这里显示父级的msg:{{msg}} <Son :msg="msg" @changeMsg="changeMsg"></Son> </div> </template> <script> /* $listeners: 包含了父作用域

vue孙子组件调爷爷组件的方法

11-16

因此，孙子组件可以通过$parent.$parent来调用爷爷组件的方法。下面是一个示例代码：爷爷组件： ```vue 我是爷爷组件爷爷组件中的内容>> <father-component></father-component> import ...

在孙组件调用爷组件方法

wancaicai_的博客

06-25

648

2、在爷组件methods同级定义 provide()方法定义要传递的爷组件方法3、在孙组件中定义inject: ['getSheetTwoData'] 接收爷组件传递的方法，4、在孙组件中直接调用爷组件传递的方法getData(){

【vue2项目】爷孙组件怎么传值和调用方法

TanMengyi的博客

08-31

2814

有一个table上面有操作项，有查看按钮，这个table叫做爷爷组件，点击查看操作，打开弹窗又是一个table，这个table叫做父亲组件，弹窗的table上也有操作按钮，会打开第二个弹窗，第二个弹窗就是孙子组件。总结，其实，爷组件传递给孙组件的逻辑流程就是，通过爷组件首先传递给父组件，当然父组件不在props中接收，那么爷组件传递给父组件的数据就会存放到父组件的。孙子组件更新状态后，只会回到父亲组件页面，但是爷爷组件上有状态也需要更新，所以要用到爷孙通信。，这个容器对象会存放:父组件传过来的。

Vue 祖孙方法调用祖父级方法在孙级调用祖孙传参

weixin_45502613的博客

08-06

1002

有需求子元素的子元素（孙子级别的元素）获取到的值要传递给祖父级祖父级代码：新增方法：provide ( ) 与生命周期同级 data() { …… }, // 与生命周期同级 provide() { return { //子组件调用的名字：对应的方法（当前页面，祖父级元素的方法） openList: this.openList }; }, mounted() { …… }, methods: { openList(type) { // 逻辑代码 console

vue 孙组件调爷爷组件的方法

Web_Notes的博客

08-30

1094

this.$parent.$parent.addFun()

在Vue中，向上通信（从孙子到爷爷）的常用方法有以下几种：

涂涂

05-11

3830

访问根组件，再使用深度优先搜索遍历其子孙组件，找到爷爷组件，调用其方法。注：这里提供的只是几种可能的方法，具体使用要根据实际情况选择。获取爷爷组件中的属性或方法，间接调用其方法。访问爷爷组件，调用其方法。提供一个函数或对象，让孙子组件使用。下面简单介绍这三种方法的使用。vue3.0照例只是写法改变。

vue实现组件隔代通信（在孙组件调用爷组件的方法）

T70H78的博客

07-07

1612

以关闭弹框为例，在孙子弹框中同时关闭爷弹框与父弹框

vue项目中子组件调用父组件方法

qq_25741071的博客

11-30

1259

在 Vue.js 项目中，子组件调用父组件的方法是一个常见的需求。

vue祖孙组件之间传值和事件传递,孙子组件中调用爷爷组件关闭el-dialog

qq_45272329的博客

04-13

4137

在vue项目中可能会遇到这种开发情景，如下一个公用的form.vue组件：  <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="活动名称"> <el-input v-model="form.name"></el-input> </el-form-item> <el-

vue2爷孙组件

m0_73582531的博客

06-25

772

3、在孙组件中定义inject: ['getSheetTwoData'] 接收爷组件传递的方法，2、在爷组件methods同级定义 provide()方法定义要传递的爷组件方法。1、在爷组件定义getSheetOneData()方法；4、在孙组件中直接调用爷组件传递的方法。