前言

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

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

Logo

前往低代码交流专区

更多推荐