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 webpack重写cookie路径的方法
webpack提供的反向代理服务器在开发阶段非常方便，几行简单的代码配置就可以使用反向代理功能，包括路径重写、cookie处理等。这篇文章主要介绍了vue webpack重写cookie路径,需要的朋友可以参考下
2019-07-07
vue中require与import的区别详解
这篇文章主要介绍了vue中require与import的区别详解,require相当于module.exports的传送门,module.exports后面的内容是什么,require的结果就是什么,对象、数字、字符串、函数,再把require的结果赋值给某个变量,需要的朋友可以参考下
2023-10-10
Vue.js实战之使用Vuex + axios发送请求详解
这篇文章主要给大家介绍了关于Vue.js使用Vuex与axios发送请求的相关资料，文中介绍的非常详细，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
2017-04-04
vue中点击切换按钮功能之点启用后按钮变为禁用
这篇文章主要介绍了vue中点击切换按钮功能之点启用后按钮变为禁用功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
2021-09-09
vue watch监听变量值的实时变动示例详解
这篇文章主要介绍了vue 监听变量值的实时变动 watch,使用字符串形式的侦听器函数,还有一种是使用函数形式的侦听器函数,本文通过示例代码介绍的非常详细,需要的朋友可以参考下
2023-08-08
一文秒懂Vue3的v-model
v-model 是 Vue 内置的指令作为属性接收一个变量（不能是常量）绑定到普通组件和自定义组件中，本文给大家介绍Vue3的v-model示例代码，感兴趣的朋友跟随小编一起看看吧
2023-02-02
一文教会你如何在npm上传自己的包
作为一个前端开发者,我们要学会自己编写一些开发工具模块,也可以自己编写一些组件,甚至可以通过自己的能力编写一个框架出来,这都需要我们能够灵活的管理我们的包,下面这篇文章主要给大家介绍了关于如何通过一文教会你在npm上传自己的包的相关资料,需要的朋友可以参考下
2023-03-03
Vue使用NProgress的操作过程解析
这篇文章主要介绍了Vue使用NProgress的操作过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-10-10
Vue替代vuex的存储库Pinia详细介绍
这篇文章主要介绍了Vue替代vuex的存储库Pinia，听说pinia与vue3更配,便开启了vue3的学习之路，pinia 和 vuex 具有相同的功效，是 Vue 的存储库，它允许您跨组件/页面共享状态
2022-09-09
Vue输入框实时验证IP地址合法性并在下方进行提示功能实现
在Vue组件中的IP地址输入框定义一个checkIpAddress方法,该方法使用正则表达式对传入的IP地址进行验证,这篇文章主要介绍了Vue输入框实时验证IP地址合法性并在下方进行提示,需要的朋友可以参考下
2024-06-06