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实现模态框组件的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
一文解决vue2 element el-table自适应高度问题
在写公司后台项目的时候遇到一个需求,要求表格页面不能有滚动条,所以必须封装一个公共方法来实现表格自适应高度,本问小编给大家介绍了如何解决vue2 element el-table自适应高度问题,需要的朋友可以参考下2023-11-11
本篇文章主要介绍了详解通过JSON数据使用VUE.JS，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要介绍了vue和iview结合动态生成表单实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要为大家详细介绍了vue实现滑动到底部加载更多效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-08-08
这篇文章主要介绍了vue实现form表单与table表格的数据关联功能,涉及vue.js表单事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2019-01-01
这篇文章主要介绍了vue搜索和vue模糊搜索，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了Vue2.0父子组件传递函数的教程详解,需要的朋友可以参考下2017-10-10
这篇文章主要给大家介绍了关于vue项目回到顶部的两种超简单实现方法,页面切换回到顶部是一个很常见的功能,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-10-10
公司内部一直有大屏的需求,也一直再做,中途也踩了一些坑,但是没有认真的来总结下,下面这篇文章主要给大家介绍了关于如何在vue项目中使用rem布局的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-02-02
最新评论