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 无法访问到父组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！