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 无法访问到父组件数据和方法 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕