前言

• 最近在使用父子組件時候，通過this.$parent訪問父組件數(shù)據(jù)和方法，出現(xiàn)undefined的情況。
• 實際場景是父組件有一個dialog彈出框，包含幾個子組件form表單，根據(jù)標(biāo)識只展示一個子組件。
• 在子組件需要傳遞一個ID給父組件中的data數(shù)據(jù)，想到this.$parent(比較簡便)，不想用this.$emit。
• 但發(fā)現(xiàn)this.$parent 實例是有打印的，但是訪問父組件數(shù)據(jù)和方法都是undefined的情況

解決思路

• 后面對著this.$parent 實例一頓找，發(fā)現(xiàn)根本就沒有父組件的數(shù)據(jù)和方法，并不是父組件的實例。
• 因為在子組件外面包了一層dialog彈出框，所以this.$parent是element實例，this.$parent.$parent是父組件實例，
• 子組件在<template></template>沒有任何包裹時通過this.$parent可以直接訪問到數(shù)據(jù)方法
• 子組件用了dialog彈出框包裹時通過this.$parent.$parent訪問數(shù)據(jù)和方法（具體看實際情況包了幾層）

代碼實例

// 沒有任何包裹是子組件訪問父組件
const parent = this.$parent
// 訪問數(shù)據(jù)
parent.數(shù)據(jù)
// 訪問方法
parent.方法
?
// 子組件被包裹時（比如dialog彈出框包裹時）
const parent = this.$parent.$parent
// 訪問數(shù)據(jù)
parent.數(shù)據(jù)
// 訪問方法
parent.方法

總結(jié)：

經(jīng)過這一趟流程下來相信你也對 Vue 子組件使用 this.$parent 無法訪問到父組件數(shù)據(jù)和方法 有了初步的深刻印象，但在實際開發(fā)中我 們遇到的情況肯定是不一樣的，所以我們要理解它的原理，萬變不離其宗。

到此這篇關(guān)于Vue 子組件使用 this.$parent 無法訪問到父組件數(shù)據(jù)和方法的文章就介紹到這了,更多相關(guān)Vue 子組件使用 this.$parent 無法訪問到父組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！