vue中this.$parent的使用方式
vue組件this.$parent
在使用vue時,你可能會用到this.$parent來進行組件與組件或者組件與外部實例的數據以及方法調用,這里簡單介紹下兩種使用環(huán)境.(這里你可以理解外部實例為非第三方組件)
一、在實例中
this.$parent 寫在組件里面,外部實例調用此組件,則其指向vue實例(這里是調用組件的實例),你可以在組件中調用 data,methods:
//例子 ?? ?this.$parent.list;//數據(模擬) ?? ?this.$parent.request();//方法(模擬)
二、在組件中調用組件
this.$parent 寫在組件里面,外部組件調用此組件,則其指向這個組件:
舉個例子：
比如elementPlus的組件 el-menu ,我們將其里面的一級二級菜單封裝為一個組件,命名為 name:‘DemoMenu’,
//例子 ?? ?<el-menu> ?? ??? ?<DemoMenu :list='list'/> ?? ?</el-menu>
這種使用方式 this.$parent 就不是指向外部實例,而是指向 el-menu;
vue子組件this.$parent調用父組件方法報錯
TypeError:this.parent.xxx is not a function
在做 vue 項目開發(fā)時，遇到了在子組件中利用this.$parent調用父組件的自定義方法，報TypeError: this.$parent.xxx is not a function的錯，可是在父組件明明定義了該方法，遂查詢 vue.js 的官方文檔，但是文檔也只有簡短的說明，并沒有相關的錯誤提示。
官方文檔中沒有提示，那就只能自己動手找原因了，隨即就在子組件中打印了this.$parent ,通過控制臺的打印，發(fā)現打印出來的 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ā)現my−component的父組件為 parent會發(fā)現my-component的父組件為parent會發(fā)現my−component的父組件為 $el:div#pane-userinfo.el-tab-pane,需要一直$this.parent.parent.parent.parent.parent.parent找到 $el:div.app-contain 才可調用父組件方法。
或者將子組件移到 UI 組件外面也可以調用到
<div class='app-container'> ??? ?<my-component></my-component>?? ?? </div>
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
element-plus結合sortablejs實現table行拖拽效果
使用element-plus的el-table組件創(chuàng)建出來的table,結合sortable.js實現table行拖動排序,文中有詳細的代碼示例供大家參考,具有一定的參考價值,感興趣的同學可以自己動手試一試2023-10-10
文章描述了在使用官網命令創(chuàng)建Nuxt3項目時遇到的問題,通過分析命令,推測問題出在拉取項目模板失敗,解決方法是手動訪問并下載項目模板,解壓后按照官網教程安裝依賴并啟動,最終成功解決問題2024-12-12
策略模式（Strategy Pattern）又稱政策模式，其定義一系列的算法，把它們一個個封裝起來，并且使它們可以互相替換。封裝的策略算法一般是獨立的，策略模式根據輸入來調整采用哪個算法。這篇文章主要介紹了策略模式實現 Vue 動態(tài)表單驗證,需要的朋友可以參考下2019-09-09
Vue+Openlayer使用modify修改要素的完整代碼
這篇文章主要介紹了Vue+Openlayer使用modify修改要素的完整代碼,代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-09-09
vue3中的reactive、readonly和shallowReactive使用詳解
在 Vue3 中,可以使用 shallowReactive 函數創(chuàng)建一個淺層響應式對象,它接收一個普通對象作為參數,返回一個淺層響應式代理對象,本文給大家介紹vue3中的reactive、readonly和shallowReactive使用,感興趣的朋友跟隨小編一起看看吧2024-04-04
這篇文章主要介紹了Vue3中操作ref的四種使用方式示例代碼(建議收藏),本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
在開發(fā)中我們常常會遇到需要讓滾動條保持到最底端的需求,比如在開發(fā)一個聊天框時,請求接口拿到消息列表數據,展示到前端頁面時,需要讓滾動條自動滾到最底端,以此來展示最后的聊天記錄,這篇文章主要介紹了Vue如何設置滾動條自動保持到最底端,需要的朋友可以參考下2024-08-08
Vue.js中使用iView日期選擇器并設置開始時間結束時間校驗功能
本文通過實例代碼給大家介紹了Vue.js中使用iView日期選擇器并設置開始時間結束時間校驗功能,需要的朋友可以參考下2018-08-08
這篇文章主要給大家介紹了關于vue復制內容到剪切板代碼實現的相關資料,在Web應用程序中剪貼板(Clipboard)操作是非常常見的操作之一,需要的朋友可以參考下2023-08-08
本文主要介紹了rollup3.x+vue2打包組件的實現，詳細的介紹了打包會存在的問題，包版本的問題，babel 轉換jsx等問題，具有一定的參考價值，感興趣的可以了解一下2023-03-03