关于爷孙组件方法调用的例子

最新推荐文章于 2024-10-31 17:58:02 发布

勇敢琳琳不怕困难

最新推荐文章于 2024-10-31 17:58:02 发布

阅读量519

点赞数 8

文章标签： vue.js

本文链接：https://blog.csdn.net/m0_61101059/article/details/134591544

版权

文章讲述了在项目开发中遇到爷孙组件的问题，即孙子组件的点击事件被爷爷组件的遮罩层遮挡。解决方案是通过爷爷组件提供自定义方法`closeMask`，孙子组件通过`inject`注入并调用该方法来关闭遮罩，实现组件间的通信.

摘要由CSDN通过智能技术生成

背景：在项目中遇到爷孙组件，在孙子组件中点击弹窗的时候会被爷爷组件中手写的遮罩层遮挡，需要在孙子组件中点击弹窗的时候关闭此遮罩。

解决：

首先在爷爷组件中写以下代码，closeMask为我自定义的方法名，用来关闭遮罩；

 provide(){
      return {closeMask:this.closeMask}
    },

然后在孙子组件中inject这个方法，并在孙子组件中直接调用即可。

inject:['closeMask'],

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

勇敢琳琳不怕困难

关注关注

8
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

【HarmonyOS】ArkTS开发@Styles装饰器和@Extend装饰器详解

一键难忘的博客

11-25

1375

在大型应用中，每个组件都需要单独设置样式，这往往导致大量的冗余代码。为了解决这一问题，ArkTS引入了@Styles装饰器，允许将多条样式设置提炼成一个方法，并在组件声明的位置轻松调用。// 全局样式定义@Component// 在组件内定义样式})build() {// 使用全局样式// 使用组件内定义的样式.fancy()上述代码展示了如何使用@Styles定义全局和组件内的样式，并通过不同的方法进行调用。

vue3 父子孙组件之间的方法的调用

weixin_45815557的博客

06-19

927

vue3 父子孙组件之间的方法的调用

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

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

10-15

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

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

TanMengyi的博客

08-31

1556

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

Vue 2.爷爷点击事件触发孙子的方法

weixin_50999683的博客

11-10

4493

1.项目场景：孙子组件中的表格数据需要校验，但是没有触发校验方法的按钮，只有通过爷爷组件的 "保存"按钮才去触发孙子的校验方法；校验成功传给爷爷一个flg值，爷爷通过flg值为true 调用保存接口（这里涉及到爷爷调用孙子方法，孙子传值给爷爷），由于项目用的vue2,所以就没有采用provide inject ，仅供参考页面展示如下： 2.解决方案 2.1爷爷调用孙子的方法（用到ref）释：在父亲组件调用儿子的方法=》爷爷调用父亲调用的儿子方法，代码展示如下父亲用ref调用...

React 父组件调用孙子组件的方法

m0_63126255的博客

03-21

831

wrappedComponentRef 属性。

vue学习（1）vue3/2下的父子/爷孙组件间方法调用

qq_39404437的博客

02-08

5740

我这里只写父子/爷孙组件间方法调用（传值的那啥emit，on， eventbus我就不在这里写了） vue2中的写法爷组件控制孙组件的锚点跳转（父子组件间方法调用类似） // 孙组件 <template> <div ref="item"> </template> methods:{ nav (index) { this.$refs.item[index].scrollIntoView(true) } ] // 爷组件 methods:{ .

Vue3官网-深入组件（七）父子组件、插槽（\＜slot＞、作用域插值、具名插槽缩写）、 Provide / Inject（响应式）、动态组件`keep-alive`、异步组件 `defineAsyn

qq_43456781的博客

09-19

367

Vue3官网-深入组件（三）父子组件、插槽（<slot>、作用域插值、具名插槽缩写）、 Provide / Inject（响应式）、动态组件keep-alive、异步组件 defineAsyncComponent 文章目录Vue3官网-深入组件（三）父子组件、插槽（\、作用域插值、具名插槽缩写）、 Provide / Inject（响应式）、动态组件`keep-alive`、异步组件 `defineAsyncComponent`1. 插槽\ \插槽内容渲染作用域备用内容具名插槽作用域插槽独占默认

Vue3 组件之间的通信

m0_49515138的博客

02-09

5252

根据它们的缩写，其实是可以知道 Prop 是指 Property ，而 Attr 是指 Attribute ，虽然都是 “属性” ，但 Property 更接近于事物本身的属性，因此需要在组件里声明，而 Attribute 更偏向于赋予的属性，因此用于指代父组件传递的其他未被声明为 Property 的属性。刚接触 Vue 的开发者可能容易混淆这两者，确实是非常接近，都是由父组件传递，由子组件接收，支持传递的数据类型也一样，但为什么一部分是在 props 获取，一部分在 attrs 获取呢？

Vue3 -- 组件通信【谁学谁真香系列4】

热门推荐

weixin_41223530的博客

12-07

1万+

参考:https://blog.csdn.net/qq_39009348/article/details/81977468 1.方法:$attrs和$listeners两个属性看了官方文档对这两个属性的解释有点抽象,简单的的说$attrs属性可以可以获取顶层组件(爷爷组件)的值(这里的数据是data定义的,而props不可以);$listeners属性相当于顶层组件(爷爷组件)事件监听器首先我定义三个组件 YEYE.vue BABA.vue SUNZI.vue 最终效果 2.将爷爷组件的值传给孙子

vue的组件通信，父子/子孙组件传参和方法调用

Change!

02-02

5544

vue父子传参，父子组件通信，子孙组件通信，

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

qq_43620210的博客

01-05

4258

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

uni-app父子组件间的方法调用及传值

Gblfy_Blog

05-14

3455

文章目录一、父组件调用子组件里的方法1. 先准备一个子组件2. 准备一个父组件二、子组件调用父组件里的方法2.1. 准备一个父组件2.2. 在准备一个子组件三、父组件给子组件传值3.1. 父组件：3.2. 子组件：四、子组件给父组件传值4.1. 父组件4.2.子组件 uni-app父子组件间的方法调用及传值方法调用：一、父组件调用子组件里的方法 1. 先准备一个子组件 <template> <view></view> </template> &l

vue3解决爷调用孙组件内的方法（mitt）

weixin_70243424的博客

05-28

1584

【代码】vue3解决爷调用孙组件内的方法（mitt）

React Hooks父子组件，祖孙组件常用通信之奶妈教程

赵花花的博客

06-24

3363

这是一篇讲解React Hooks 父子组件，祖孙组件，兄弟组件通信的常用方法总结

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

暂时还没想好博客简介

11-14

1万+

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

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

09-13

要让Vue孙组件调用爷组件的方法，可以通过使用Vue的事件总线机制来实现。首先，在爷组件中创建一个事件总线对象，并将该对象挂载到Vue的原型上，以便在整个应用程序中都可以访问到该事件总线。然后，在爷组件中定义一个方法，该方法可以通过触发事件的方式将需要调用的方法传递给孙组件。最后，在孙组件中通过订阅事件的方式来接收并调用爷组件传递的方法。具体的步骤如下： 1. 在爷组件中创建一个事件总线对象，可以使用Vue实例作为事件总线对象，例如`const bus = new Vue()`。 2. 将事件总线对象挂载到Vue的原型上，以便在整个应用程序中都可以使用，例如`Vue.prototype.$bus = bus`。 3. 在爷组件中定义一个方法，用于被孙组件触发调用，例如`handleMethod(params)`。 4. 在爷组件中通过`this.$bus.$emit('event-name', params)`方式触发一个自定义事件，并传递需要调用的方法及参数。 5. 在孙组件中通过`this.$bus.$on('event-name', method)`方式订阅该自定义事件，并在回调函数中调用爷组件传递的方法。这样，当孙组件需要调用爷组件的方法时，只需通过触发自定义事件的方式将需要调用的方法传递给爷组件即可。请注意，为了避免内存泄漏，应在孙组件销毁时取消订阅自定义事件，可以在`beforeDestroy`钩子函数中使用`this.$bus.$off('event-name')`取消订阅。 : https://blog.csdn.net/qq_41429394/article/details/105924171 : https://blog.csdn.net/u010358007/article/details/114862516 : https://blog.csdn.net/mldwyy/article/details/105415690