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 寫(xiě)在組件里面,外部實(shí)例調(diào)用此組件,則其指向vue實(shí)例(這里是調(diào)用組件的實(shí)例),你可以在組件中調(diào)用 data,methods:

//例子
?? ?this.$parent.list;//數(shù)據(jù)(模擬)
?? ?this.$parent.request();//方法(模擬)

二、在組件中調(diào)用組件

this.$parent 寫(xiě)在組件里面,外部組件調(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)目開(kāi)發(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è)參考，也希望大家多多支持腳本之家。

最新評(píng)論