vue組件this.$parent

在使用vue時,你可能會用到this.$parent來進行組件與組件或者組件與外部實例的數(shù)據(jù)以及方法調(diào)用,這里簡單介紹下兩種使用環(huán)境.(這里你可以理解外部實例為非第三方組件)

一、在實例中

this.$parent 寫在組件里面,外部實例調(diào)用此組件,則其指向vue實例(這里是調(diào)用組件的實例),你可以在組件中調(diào)用 data,methods:

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

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

this.$parent 寫在組件里面,外部組件調(diào)用此組件,則其指向這個組件:

舉個例子：

比如elementPlus的組件 el-menu ,我們將其里面的一級二級菜單封裝為一個組件,命名為 name:‘DemoMenu’,

//例子
?? ?<el-menu>
?? ??? ?<DemoMenu :list='list'/>
?? ?</el-menu>

這種使用方式 this.$parent 就不是指向外部實例,而是指向 el-menu;

vue子組件this.$parent調(diào)用父組件方法報錯

TypeError:this.parent.xxx is not a function

在做 vue 項目開發(fā)時，遇到了在子組件中利用this.$parent調(diào)用父組件的自定義方法，報TypeError: this.$parent.xxx is not a function的錯，可是在父組件明明定義了該方法，遂查詢 vue.js 的官方文檔，但是文檔也只有簡短的說明，并沒有相關的錯誤提示。

官方文檔中沒有提示，那就只能自己動手找原因了，隨即就在子組件中打印了this.$parent ,通過控制臺的打印，發(fā)現(xiàn)打印出來的 this.$parent并不是該組件的父組件，而是 Element ui 的組件，原來是我在父組件引用子組件的時候還在外面套了多層 UI 組件導致的。

<div class='app-container'>
?? ?<el-row :guter='20'>
?? ??? ?<el-col>
?? ??? ??? ?......
?? ??? ??? ?<el-card>
?? ??? ??? ?......
?? ??? ??? ??? ?<el-tabs v-model="activeName" @tab-click="handleClick">
? ? ?? ??? ??? ? ?? ?<p slot="title">標題</p>
? ? ??? ??? ??? ??? ?<my-component></my-component>
??? ??? ??? ??? ?</el-tabs>
?? ??? ??? ?</el-card>
?? ??? ?</el-col>
?? ?</el-row>
</div>

打印this.parent會發(fā)現(xiàn)my−component的父組件為 parent會發(fā)現(xiàn)my-component的父組件為parent會發(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>

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論