vue中this.$parent的使用方式
vue組件this.$parent
在使用vue時(shí),你可能會(huì)用到this.$parent來(lái)進(jìn)行組件與組件或者組件與外部實(shí)例的數(shù)據(jù)以及方法調(diào)用,這里簡(jiǎn)單介紹下兩種使用環(huán)境.(這里你可以理解外部實(shí)例為非第三方組件)
一、在實(shí)例中
this.$parent 寫在組件里面,外部實(shí)例調(diào)用此組件,則其指向vue實(shí)例(這里是調(diào)用組件的實(shí)例),你可以在組件中調(diào)用 data,methods:
//例子 ?? ?this.$parent.list;//數(shù)據(jù)(模擬) ?? ?this.$parent.request();//方法(模擬)
二、在組件中調(diào)用組件
this.$parent 寫在組件里面,外部組件調(diào)用此組件,則其指向這個(gè)組件:
舉個(gè)例子：
比如elementPlus的組件 el-menu ,我們將其里面的一級(jí)二級(jí)菜單封裝為一個(gè)組件,命名為 name:‘DemoMenu’,
//例子 ?? ?<el-menu> ?? ??? ?<DemoMenu :list='list'/> ?? ?</el-menu>
這種使用方式 this.$parent 就不是指向外部實(shí)例,而是指向 el-menu;
vue子組件this.$parent調(diào)用父組件方法報(bào)錯(cuò)
TypeError:this.parent.xxx is not a function
在做 vue 項(xiàng)目開發(fā)時(shí)，遇到了在子組件中利用this.$parent調(diào)用父組件的自定義方法，報(bào)TypeError: this.$parent.xxx is not a function的錯(cuò)，可是在父組件明明定義了該方法，遂查詢 vue.js 的官方文檔，但是文檔也只有簡(jiǎn)短的說(shuō)明，并沒(méi)有相關(guān)的錯(cuò)誤提示。
官方文檔中沒(méi)有提示，那就只能自己動(dòng)手找原因了，隨即就在子組件中打印了this.$parent ,通過(guò)控制臺(tái)的打印，發(fā)現(xiàn)打印出來(lái)的 this.$parent并不是該組件的父組件，而是 Element ui 的組件，原來(lái)是我在父組件引用子組件的時(shí)候還在外面套了多層 UI 組件導(dǎo)致的。
<div class='app-container'> ?? ?<el-row :guter='20'> ?? ??? ?<el-col> ?? ??? ??? ?...... ?? ??? ??? ?<el-card> ?? ??? ??? ?...... ?? ??? ??? ??? ?<el-tabs v-model="activeName" @tab-click="handleClick"> ? ? ?? ??? ??? ? ?? ?<p slot="title">標(biāo)題</p> ? ? ??? ??? ??? ??? ?<my-component></my-component> ??? ??? ??? ??? ?</el-tabs> ?? ??? ??? ?</el-card> ?? ??? ?</el-col> ?? ?</el-row> </div>
打印this.parent會(huì)發(fā)現(xiàn)my−component的父組件為 parent會(huì)發(fā)現(xiàn)my-component的父組件為parent會(huì)發(fā)現(xiàn)my−component的父組件為 $el:div#pane-userinfo.el-tab-pane,需要一直$this.parent.parent.parent.parent.parent.parent找到 $el:div.app-contain 才可調(diào)用父組件方法。
或者將子組件移到 UI 組件外面也可以調(diào)用到
<div class='app-container'> ??? ?<my-component></my-component>?? ?? </div>
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue?element-ui的el-input-number默認(rèn)值設(shè)置為空方法
這篇文章主要給大家介紹了關(guān)于vue?element-ui的el-input-number默認(rèn)值設(shè)置為空的相關(guān)資料,el-input-number組件是Element?UI非常常用的一個(gè)數(shù)字輸入框組件,它提供了默認(rèn)值設(shè)置的選項(xiàng),需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue init失敗的簡(jiǎn)單解決方法-終極版,需要的朋友可以參考下2017-12-12
結(jié)合mint-ui移動(dòng)端下拉加載實(shí)踐方法總結(jié)
下面小編就為大家?guī)?lái)一篇結(jié)合mint-ui移動(dòng)端下拉加載實(shí)踐方法總結(jié)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
基于vue、react實(shí)現(xiàn)倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了基于vue、react實(shí)現(xiàn)倒計(jì)時(shí)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
本文通過(guò)實(shí)例代碼給大家介紹了vue底部加載更多,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
解決webpack-bundle-analyzer的問(wèn)題大坑
這篇文章主要介紹了解決webpack-bundle-analyzer的問(wèn)題大坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue實(shí)現(xiàn)數(shù)字輸入框中分割手機(jī)號(hào)碼的示例
本篇文章主要介紹了Vue實(shí)現(xiàn)數(shù)字輸入框中分割手機(jī)號(hào)碼的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
這篇文章主要介紹了Element Breadcrumb 面包屑的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
解決vue-seamless-scroll滾動(dòng)加點(diǎn)贊銜接處數(shù)據(jù)不同步問(wèn)題
這篇文章主要介紹了解決vue-seamless-scroll滾動(dòng)加點(diǎn)贊銜接處數(shù)據(jù)不同步問(wèn)題,初步判斷可能是因?yàn)橄路綉医觱ue-seamless-scroll是靜態(tài)的，沒(méi)同步DOM，本文給大家分享解決方法，感興趣的朋友一起看看吧2021-11-11
element多個(gè)表單校驗(yàn)的實(shí)現(xiàn)
在項(xiàng)目中，經(jīng)常會(huì)遇到表單檢驗(yàn)，在這里我分享在實(shí)際項(xiàng)目中遇到多個(gè)表單同時(shí)進(jìn)行校驗(yàn)以及我的解決方法，感興趣的可以了解一下2021-05-05