vue的孙组件获取祖组件数据的方法（this.$parent）

都挺好，刚刚好

已于 2023-09-20 10:44:55 修改

阅读量480

点赞数

分类专栏： vue2 文章标签： vue.js 前端 javascript

于 2023-09-20 10:39:14 首次发布

本文链接：https://blog.csdn.net/seimeii/article/details/133068988

版权

vue2 专栏收录该内容

54 篇文章 4 订阅

订阅专栏

项目中遇到一个问题，使用第三方插件的组件库会导致自己封装的组件库无法通过this.$parent.data获取父组件的数据

在孙组件里使用this. $p a re n t .$ 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
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue的孙组件获取祖组件数据的方法（this.$parent）

vue的孙组件获取祖组件数据的方法
复制链接

扫一扫

专栏目录

vue组件 $children,$refs，$parent的使用详解

08-29

然后，在父组件中，我们可以通过 `this.$refs.one` 访问这个子组件，包括访问子组件的数据和调用它的方法。 $parent 属性 $parent 属性允许子组件访问父组件。例如： ```javascript getParent() { let a = 1; ...

vue父子组件间引用之$parent、$children

01-19

也就是说，虽然在一般情况下，子组件是不能引用父组件或者Vue实例的数据，但是对于在开发中出现的“数据需要在组件中来回传递”，我们最简单的解决办法就是通过props（和v-on）将数据从父组件传到子组件，再用$emit...

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

this.$parent.$data

she8362315的博客

12-21

3246

this.parent.parent.parent.data 可以获取父级数据,也可以给父级数据赋值定义变量 data() { return { name:'' } } this.$parent.$data.name = 1 //赋值 console.log(this.$parent.$data.name) //获取 ...

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

Bruce小鬼

11-14

1779

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

vue 查找出某个指定的父级祖先组件实例

黄钟飞的博客

12-10

1630

vue 查找出某个指定的父级祖先组件实例

Vue中，子组件如何访问祖先组件中的数据

weixin_51341142的博客

10-21

510

任何后代的组件树，无论层级有多深，都可以**注入**由父组件提供给整条链路的依赖。这里，组件本地化了原注入名 `"message"` 所提供的的属性，并将其暴露为 `this.localMessage`。祖先提供了暴露的数据，在使用该数据的子组件中我们需要注入之后才能使用

Vue.js 父子组件通讯

wxc_niuniu的博客

09-05

5163

vue.js，是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。（这是官方的一个解释！）小编没使用过angularjs，也没使用过react.js，不能详细的说明三者的区别，想了解的话，在官方有一个分析，请点这里查看小编从业前端开发也有了一年多的时间，刚开始的时候，前端开发展现的技术太多，小编有心无力，兼顾不过来，经过了解之

vue 父组件通过$refs获取子组件的值和方法详解

10-16

总结来说，Vue 父组件通过 `$refs` 获取子组件的值和方法是一种直接的通信方式，适用于某些场景，如需在父组件中直接调用子组件的方法或获取实时状态。但通常，推荐使用更灵活且易于维护的通信方式，如 props、事件...

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

10-18

在Vue框架中，父组件与子组件之间的数据传递是一个常见的需求。当父组件的数据是通过异步请求获取时，如何正确地将这些数据传递给子组件，并确保子组件能够及时、安全地使用这些数据，是开发者需要面对的问题。本文...

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

10-17

在孙组件中，当需要将数据传递给爷组件时，可以通过`$emit`方法触发一个自定义事件，并携带需要传递的数据。例如，孙组件中有一个按钮，点击后触发`say1`事件并传入名字`Jack`： ```html child $emit("say1",...

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

m0_49471668的博客

11-05

920

实现孙组件调用祖先组件函数。祖先组件 data() { …… }, // 与生命周期同级 provide() { return { //子组件调用的名字：对应的方法（当前页面，祖父级元素的方法） openList: this.openList }; }, mounted() { …… }, methods: { openList(type) { // 逻辑代码 console.log(type); }, } 孙组件： name: "waterPieCo

vue中的this.$parent

科技向善

04-20

2253

需要注意的是，使用this.$parent来访问父组件的数据和方法并不是一个好的做法，因为它会使子组件和父组件耦合在一起，使得代码难以维护和复用。使用provide和inject可以让父组件向子组件传递数据和方法，而不需要使用this.$parent来访问父组件。如果子组件需要调用父组件的方法，可以使用this.$parent.someMethod()来调用方法。可以用来获取组件的父实例，可以在子组件中使用它来访问父组件的数据和方法。例如，如果子组件需要访问父组件的数据，可以使用。

vue子组件拿到它父组件的数据的4种方法