Vue 子组件使用 this.$parent 无法访问到父组件数据和方法(解决思路)

更新时间：2023年07月20日 15:57:24 作者：-風过无痕

这篇文章主要介绍了Vue 子组件使用 this.$parent 无法访问到父组件数据和方法，解决思路也很简单，本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下

前言

最近在使用父子组件时候，通过this.$parent访问父组件数据和方法，出现undefined的情况。
实际场景是父组件有一个dialog弹出框，包含几个子组件form表单，根据标识只展示一个子组件。
在子组件需要传递一个ID给父组件中的data数据，想到this.$parent(比较简便)，不想用this.$emit。
但发现this.$parent 实例是有打印的，但是访问父组件数据和方法都是undefined的情况

解决思路

后面对着this.$parent 实例一顿找，发现根本就没有父组件的数据和方法，并不是父组件的实例。
因为在子组件外面包了一层dialog弹出框，所以this.$parent是element实例，this.$parent.$parent是父组件实例，
子组件在<template></template>没有任何包裹时通过this.$parent可以直接访问到数据方法
子组件用了dialog弹出框包裹时通过this.$parent.$parent访问数据和方法（具体看实际情况包了几层）

代码实例

// 没有任何包裹是子组件访问父组件
const parent = this.$parent
// 访问数据
parent.数据
// 访问方法
parent.方法

// 子组件被包裹时（比如dialog弹出框包裹时）
const parent = this.$parent.$parent
// 访问数据
parent.数据
// 访问方法
parent.方法

总结：

经过这一趟流程下来相信你也对 Vue 子组件使用 this.$parent 无法访问到父组件数据和方法有了初步的深刻印象，但在实际开发中我们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。

到此这篇关于Vue 子组件使用 this.$parent 无法访问到父组件数据和方法的文章就介绍到这了,更多相关Vue 子组件使用 this.$parent 无法访问到父组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

详解Vue结合后台的列表增删改案例
这篇文章主要介绍了详解Vue结合后台的增删改案例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
vue如何调用摄像头实现拍照上传图片、本地上传图片
这篇文章主要给大家介绍了关于vue如何调用摄像头实现拍照上传图片、本地上传图片的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2023-07-07
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
下面小编就为大家分享一篇解决使用Vue.js显示数据的时,页面闪现原始代码的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
Vue3+ElementPlus 表单组件的封装实例
这篇文章主要介绍了Vue3+ElementPlus 表单组件的封装实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
前端本地存储方案localForage在vue3中使用方法
localForage是前端本地存储的库,支持多种存储后端,并提供了一致的API来存储和检索数据,这篇文章主要给大家介绍了关于前端本地存储方案localForage在vue3中使用的相关资料,需要的朋友可以参考下
2024-09-09
vue中的this.$refs,this.$emit,this.$store,this.$nextTick的使用方式
这篇文章主要介绍了vue中的this.$refs,this.$emit,this.$store,this.$nextTick的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-04-04
vue中使用vue-qriously插件生成二维码
集成vue-cli脚手架里面的二维码插件貌似很多，一般都会满足大部分需求，这次就讲一下插件vue-qriously生成二维码效果，感兴趣的朋友一起看看吧
2022-04-04
详解Vue.js入门环境搭建
这篇文章主要介绍了详解Vue.js入门环境搭建，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2017-03-03
Vue编译优化实现流程详解
编译优化指的是编译器将模板编译为渲染函数的过程中，尽可能多的提取关键信息，并以此指导生成最优代码的过程，优化的方向主要是区分动态内容和静态内容，并针对不同的内容采用不同的优化策略
2023-01-01
Vue设计器form-create-designer配置表单默认值示例详解
这篇文章主要介绍了如何使用开源项目form-create-designer来灵活调整表单的默认值,通过config.formOptions,您可以自定义表单的全局布局,文章提供了一个详细的例子,展示了如何使用form-create-designer的配置选项来调整表单的布局和外观,感兴趣的朋友一起看看吧
2024-11-11