Vue 子組件使用 this.$parent 無法訪問到父組件數(shù)據(jù)和方法(解決思路)
更新時(shí)間：2023年07月20日 15:57:24 作者：-風(fēng)過無痕
這篇文章主要介紹了Vue 子組件使用 this.$parent 無法訪問到父組件數(shù)據(jù)和方法，解決思路也很簡(jiǎn)單，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
前言
- 最近在使用父子組件時(shí)候，通過this.$parent訪問父組件數(shù)據(jù)和方法，出現(xiàn)undefined的情況。
- 實(shí)際場(chǎng)景是父組件有一個(gè)dialog彈出框，包含幾個(gè)子組件form表單，根據(jù)標(biāo)識(shí)只展示一個(gè)子組件。
- 在子組件需要傳遞一個(gè)ID給父組件中的data數(shù)據(jù)，想到this.$parent(比較簡(jiǎn)便)，不想用this.$emit。
- 但發(fā)現(xiàn)this.$parent 實(shí)例是有打印的，但是訪問父組件數(shù)據(jù)和方法都是undefined的情況
解決思路
- 后面對(duì)著this.$parent 實(shí)例一頓找，發(fā)現(xiàn)根本就沒有父組件的數(shù)據(jù)和方法，并不是父組件的實(shí)例。
- 因?yàn)樵谧咏M件外面包了一層dialog彈出框，所以this.$parent是element實(shí)例，this.$parent.$parent是父組件實(shí)例，
- 子組件在<template></template>沒有任何包裹時(shí)通過this.$parent可以直接訪問到數(shù)據(jù)方法
- 子組件用了dialog彈出框包裹時(shí)通過this.$parent.$parent訪問數(shù)據(jù)和方法（具體看實(shí)際情況包了幾層）
代碼實(shí)例
// 沒有任何包裹是子組件訪問父組件 const parent = this.$parent // 訪問數(shù)據(jù) parent.數(shù)據(jù) // 訪問方法 parent.方法 ? // 子組件被包裹時(shí)（比如dialog彈出框包裹時(shí)） const parent = this.$parent.$parent // 訪問數(shù)據(jù) parent.數(shù)據(jù) // 訪問方法 parent.方法
總結(jié)：
經(jīng)過這一趟流程下來相信你也對(duì) Vue 子組件使用 this.$parent 無法訪問到父組件數(shù)據(jù)和方法 有了初步的深刻印象，但在實(shí)際開發(fā)中我 們遇到的情況肯定是不一樣的，所以我們要理解它的原理，萬變不離其宗。
到此這篇關(guān)于Vue 子組件使用 this.$parent 無法訪問到父組件數(shù)據(jù)和方法的文章就介紹到這了,更多相關(guān)Vue 子組件使用 this.$parent 無法訪問到父組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了詳解Vue結(jié)合后臺(tái)的增刪改案例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
vue如何調(diào)用攝像頭實(shí)現(xiàn)拍照上傳圖片、本地上傳圖片
這篇文章主要給大家介紹了關(guān)于vue如何調(diào)用攝像頭實(shí)現(xiàn)拍照上傳圖片、本地上傳圖片的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-07-07
解決使用Vue.js顯示數(shù)據(jù)的時(shí),頁面閃現(xiàn)原始代碼的問題
下面小編就為大家分享一篇解決使用Vue.js顯示數(shù)據(jù)的時(shí),頁面閃現(xiàn)原始代碼的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vue3+ElementPlus 表單組件的封裝實(shí)例
這篇文章主要介紹了Vue3+ElementPlus 表單組件的封裝實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
前端本地存儲(chǔ)方案localForage在vue3中使用方法
localForage是前端本地存儲(chǔ)的庫,支持多種存儲(chǔ)后端,并提供了一致的API來存儲(chǔ)和檢索數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于前端本地存儲(chǔ)方案localForage在vue3中使用的相關(guān)資料,需要的朋友可以參考下2024-09-09
vue中的this.$refs,this.$emit,this.$store,this.$nextTick的使用方式
這篇文章主要介紹了vue中的this.$refs,this.$emit,this.$store,this.$nextTick的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
集成vue-cli腳手架里面的二維碼插件貌似很多，一般都會(huì)滿足大部分需求，這次就講一下插件vue-qriously生成二維碼效果，感興趣的朋友一起看看吧2022-04-04
這篇文章主要介紹了詳解Vue.js入門環(huán)境搭建，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
編譯優(yōu)化指的是編譯器將模板編譯為渲染函數(shù)的過程中，盡可能多的提取關(guān)鍵信息，并以此指導(dǎo)生成最優(yōu)代碼的過程，優(yōu)化的方向主要是區(qū)分動(dòng)態(tài)內(nèi)容和靜態(tài)內(nèi)容，并針對(duì)不同的內(nèi)容采用不同的優(yōu)化策略2023-01-01
Vue設(shè)計(jì)器form-create-designer配置表單默認(rèn)值示例詳解
這篇文章主要介紹了如何使用開源項(xiàng)目form-create-designer來靈活調(diào)整表單的默認(rèn)值,通過config.formOptions,您可以自定義表單的全局布局,文章提供了一個(gè)詳細(xì)的例子,展示了如何使用form-create-designer的配置選項(xiàng)來調(diào)整表單的布局和外觀,感興趣的朋友一起看看吧2024-11-11