前言
-
最近在使用父子组件时候，通过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 无法访问到父组件数据和方法 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！文章来源：https://www.toymoban.com/news/detail-508048.html
什么不足的地方请大家指出谢谢 -- 風过无痕文章来源地址https://www.toymoban.com/news/detail-508048.html
到了这里，关于Vue 子组件使用 this.$parent 无法访问到父组件数据和方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
