vue中this.$parent的使用方式
vue組件this.$parent
在使用vue時(shí),你可能會(huì)用到this.$parent來進(jìn)行組件與組件或者組件與外部實(shí)例的數(shù)據(jù)以及方法調(diào)用,這里簡單介紹下兩種使用環(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 的官方文檔，但是文檔也只有簡短的說明，并沒有相關(guān)的錯(cuò)誤提示。
官方文檔中沒有提示，那就只能自己動(dòng)手找原因了，隨即就在子組件中打印了this.$parent ,通過控制臺(tái)的打印，發(fā)現(xiàn)打印出來的 this.$parent并不是該組件的父組件，而是 Element ui 的組件，原來是我在父組件引用子組件的時(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)文章
element-plus結(jié)合sortablejs實(shí)現(xiàn)table行拖拽效果
使用element-plus的el-table組件創(chuàng)建出來的table,結(jié)合sortable.js實(shí)現(xiàn)table行拖動(dòng)排序,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,感興趣的同學(xué)可以自己動(dòng)手試一試2023-10-10
文章描述了在使用官網(wǎng)命令創(chuàng)建Nuxt3項(xiàng)目時(shí)遇到的問題,通過分析命令,推測問題出在拉取項(xiàng)目模板失敗,解決方法是手動(dòng)訪問并下載項(xiàng)目模板,解壓后按照官網(wǎng)教程安裝依賴并啟動(dòng),最終成功解決問題2024-12-12
策略模式實(shí)現(xiàn) Vue 動(dòng)態(tài)表單驗(yàn)證的方法
策略模式（Strategy Pattern）又稱政策模式，其定義一系列的算法，把它們一個(gè)個(gè)封裝起來，并且使它們可以互相替換。封裝的策略算法一般是獨(dú)立的，策略模式根據(jù)輸入來調(diào)整采用哪個(gè)算法。這篇文章主要介紹了策略模式實(shí)現(xiàn) Vue 動(dòng)態(tài)表單驗(yàn)證,需要的朋友可以參考下2019-09-09
Vue+Openlayer使用modify修改要素的完整代碼
這篇文章主要介紹了Vue+Openlayer使用modify修改要素的完整代碼,代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-09-09
vue3中的reactive、readonly和shallowReactive使用詳解
在 Vue3 中,可以使用 shallowReactive 函數(shù)創(chuàng)建一個(gè)淺層響應(yīng)式對象,它接收一個(gè)普通對象作為參數(shù),返回一個(gè)淺層響應(yīng)式代理對象,本文給大家介紹vue3中的reactive、readonly和shallowReactive使用,感興趣的朋友跟隨小編一起看看吧2024-04-04
這篇文章主要介紹了Vue3中操作ref的四種使用方式示例代碼(建議收藏),本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
Vue如何設(shè)置滾動(dòng)條自動(dòng)保持到最底端
在開發(fā)中我們常常會(huì)遇到需要讓滾動(dòng)條保持到最底端的需求,比如在開發(fā)一個(gè)聊天框時(shí),請求接口拿到消息列表數(shù)據(jù),展示到前端頁面時(shí),需要讓滾動(dòng)條自動(dòng)滾到最底端,以此來展示最后的聊天記錄,這篇文章主要介紹了Vue如何設(shè)置滾動(dòng)條自動(dòng)保持到最底端,需要的朋友可以參考下2024-08-08
Vue.js中使用iView日期選擇器并設(shè)置開始時(shí)間結(jié)束時(shí)間校驗(yàn)功能
本文通過實(shí)例代碼給大家介紹了Vue.js中使用iView日期選擇器并設(shè)置開始時(shí)間結(jié)束時(shí)間校驗(yàn)功能,需要的朋友可以參考下2018-08-08
vue復(fù)制內(nèi)容到剪切板代碼實(shí)現(xiàn)
這篇文章主要給大家介紹了關(guān)于vue復(fù)制內(nèi)容到剪切板代碼實(shí)現(xiàn)的相關(guān)資料,在Web應(yīng)用程序中剪貼板(Clipboard)操作是非常常見的操作之一,需要的朋友可以參考下2023-08-08
rollup3.x+vue2打包組件的實(shí)現(xiàn)
本文主要介紹了rollup3.x+vue2打包組件的實(shí)現(xiàn)，詳細(xì)的介紹了打包會(huì)存在的問題，包版本的問題，babel 轉(zhuǎn)換jsx等問題，具有一定的參考價(jià)值，感興趣的可以了解一下2023-03-03