vue的孙组件获取祖组件数据的方法

最新推荐文章于 2024-06-19 15:12:15 发布

甜甜圆圆圈圈

最新推荐文章于 2024-06-19 15:12:15 发布

阅读量3.3k

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/zhangtian_tian/article/details/105065744

版权

vue 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

项目中遇到一个问题，使用第三方插件的组件库会导致自己封装的组件库无法通过this.$parent.data获取父组件的数据（严格意义上讲这个父组件应该是祖级组件）
在无意尝试中发现使用在孙组件里使用this.$parent.$parent.data即可获取到祖级数据。

<template>
  <div id='detail'>
  	<!-- 第三方框架封装的组件 -->
    <van-popup v-model="showDialog" :show="false" @click-overlay="overPopup">
      <LocationModule></LocationModule><!-- 自己封装的组件 -->
    </van-popup>
  </div>
</template>

//在LocationModule组件中
//如果使用this.$praent.data获取到的数据是第三方框架封装的组件数据，并不是#detail的数据
//此时使用
this.$parent.$parent.data//即可获取到#detail的数据

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

甜甜圆圆圈圈

关注关注

0
点赞
踩
2

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

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

10-17

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

vue 祖孙组件通信，祖组件获取孙组件数据

qing12313359的专栏

05-10

2468

祖组件： <select-itemselectFiled="tyreTreadWidth":width="70"v-on:selected="selectedTreadWidth":defaultVal="tyreTreadWidth"></select-item> 父组件： <c-select:items="lstItems":width="width"v-on="$listeners":selectVal="defaultVal">&lt...

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

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

最新发布

weixin_45815557的博客

06-19

501

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

vue 孙子组件获取祖先组件数据

Bruce小鬼

11-14

1824

Provide/Inject非常简单，就像vue页面中使用的data对象一样，但是他与data也是有区别的。下面来介绍下他怎么使用，以及使用时遇到的问题。// 在provide定义一个name数据 provide() {return {return {info : "1号" , } } ,console . log("子组件获取祖先组件数据" , this . name) } } } < / script >

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

暂时还没想好博客简介

11-14

1万+

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

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

T70H78的博客

07-07

1538

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

vue父组件异步获取数据传给子组件的方法

10-18

总的来说，Vue中父组件异步获取数据并传递给子组件时，应考虑以下几个关键点： 1. 使用`v-if`条件渲染子组件，防止在数据未准备好时进行渲染。 2. 子组件通过`props`接收数据，并使用`watch`监听数据变化，以确保...

vue父组件中获取子组件中的数据(实例讲解)

12-29

如下所示：上传头像 prop=image> *150px ref=avatar> 上传营业执照 prop=businessLicence> <uploadImg :width=350 :height=200 :name='businessLicence' size=350px*200px ref=bu

详解VUE里子组件如何获取父组件动态变化的值

10-17

总结来说，Vue 中子组件获取父组件动态变化的值主要通过 `props` 传递数据，然后通过 `computed` 或 `watch` 实现对数据变化的监听。同时，子组件可以使用 `$emit` 来向父组件发送事件，以达到双向数据绑定的效果。...

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

Web_Notes的博客

08-30

1041

this.$parent.$parent.addFun()

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

weixin_47163986的博客

02-22

889

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

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

10-15

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

vue2组件通信(十)——长辈传递后代$attrs/$listeners

浪头的博客

04-20

184

包含了父作⽤域中不作为 prop被识别(且获取) 的特性绑定 ( class 和 style除外)。当⼀个组件没有声明任何 prop 时，这⾥会包含所有⽗作⽤域的绑定 ( class和 style 除外)，并且可以通过 v-bind="$attrs"传⼊内部组件——在创建⾼级别的组件时非常有⽤。 // 爷 <Child2 :num="1" @info="info"></Child2> methods: { info(){ console.log("inf

vue组件祖先/父亲/孙子传值：props, provide,inject,$attrs,$listeners,$emit,$on,

热门推荐

qq_41357391的博客

03-12

1万+

vue组件之间的传递分类： 1、父向子传递：props 2、子向父传递：emit3、兄弟之间传递：借助中间代理：emit 3、兄弟之间传递：借助中间代理：emit3、兄弟之间传递：借助中间代理：emit,$on 4、祖先传给孙子：这个高级provide,inject 父子关系：parent =>children 祖先和孙子关系：parent=>grandSon parent.vue ...

vue爷孙组件传值

YZ_ZZZ24的博客

07-30

5409

其实$attrs和$listeners相当于是一个中转，主要用在父亲组件上。爷组件和孙组件保持以前的使用即可！

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

Change!

02-02

5446

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

vue中用ref实现父子组件、孙组件、兄弟组件、非亲子孙组件互相调用的方法

vvv3171071的博客

09-03

4233

无论是什么层级的组件之间互相调用，掌握好ref后都是万变不离其宗。来练练手吧。

vue祖孙组件之间的数据传递

qq_35176916的博客

02-25

1万+

**解决的问题：** 使用$attrs和$listeners实现祖孙组件之间的数据传递，也就是多重嵌套组件之间的数据传递。 **注意：** 本方法针对vue2.4版本及以上，使用$attrs和$listeners来实现的 **解决方案：** **首先创建父组件：** 父组件用于动态数据的绑定与事件的定义 <template> <div> ...

vue 子组件调用祖父级或更高层级组件的方法

DesireOldFriend的博客

09-28

5277

今天遇到一个问题，因为需求的原因我的组件嵌套的有点多，需要从子组件调用祖父级组件的方法。这里需要的版本是 vue 2.2.0版本及更高版本在你的祖父级组件中写入 provide方法在你要操作的孙子组件中写入 inject provide具体用法：这里的provide是和methods同级的，this.showpay是我的方法 inject具体用法：在子组件中是和data 这些同级，有点类似于props, 优点就是不止是祖父层级，更高层级也可以。 ...

vue 父组件获取子组件所有数据

08-18

要在Vue的父组件中获取子组件的数据，你可以通过以下几种方式实现： 1. 使用 `ref` 引用子组件并直接访问其数据：在父组件中，使用 `ref` 属性给子组件命名，然后通过该引用来访问子组件的数据。例如： ```html <template> <div> <child-component ref="child"></child-component> <button @click="getChildData">获取子组件数据</button> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { getChildData() { const childData = this.$refs.child.childData; console.log(childData); } } } </script> ``` 在上面的示例中，我们通过 `ref` 属性将子组件命名为 "child"，然后在 `getChildData` 方法中通过 `this.$refs.child` 来访问子组件实例，并获取其 `childData` 数据。 2. 使用自定义事件：在子组件中，通过 `$emit` 方法触发一个自定义事件，并将数据作为参数传递给父组件。父组件通过监听该自定义事件来获取子组件的数据。例如： ```html  <template> <div> <button @click="sendData">发送数据给父组件</button> </div> </template> <script> export default { data() { return { childData: '子组件数据' } }, methods: { sendData() { this.$emit('childData', this.childData); } } } </script> ``` ```html  <template> <div> <child-component @childData="getChildData"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { getChildData(childData) { console.log(childData); } } } </script> ``` 在上面的示例中，子组件通过 `$emit` 方法触发了一个名为 "childData" 的自定义事件，并将 `childData` 数据作为参数传递给父组件。父组件通过 `@childData` 监听该自定义事件，并在 `getChildData` 方法中获取子组件传递过来的数据。这些是获取子组件数据的常用方法，你可以根据自己的需求选择合适的方式来实现。