vue父元件觸發子元件方法

2021-09-09 06:26:57 字數 557 閱讀 9615

通常來說是子元件觸發父元件的情況比較多。比如每次提交表單的時候封裝了常用的選項類子元件,選好值之後將值傳回父元件,父元件得到值這樣的操作。這是不用初始化頁面資料的情況。

但是還有其他的情況就是已經選好了謀個服裝的品牌和品牌下的某個系列後(這是兩個相同的元件但是在父元件不同的地方呼叫)

這時候我想換個品牌那麼系列的子元件的資料也要跟著清空並換成另一批資料。這是後可以通過監聽的方式或者props。我用的是另一種方法,通過子元件在元件剛載入(mounted或者create中)的時候就定義乙個讓父元件接收的方法,這和方法觸發後可以在子元件進行一定的操作。注意這裡是非同步操作需要提前定義好this否則無法成功。

mounted () )//設定接收父元件的方法

},

父元件中引入改子元件並使用

在元件上定義好ref然後通過$emit給子元件傳送方法

this.$refs.series.$emit('bridge')//觸發選擇系列子元件方法
這樣就完成了父元件觸發子元件的方法

Vue 父元件如何觸發子元件中的方法

子元件 child 父元件 點選 1.首先父元件匯入子元件並且在components中定義子元件 2.引用子元件,並定義ref,用於 this.refs.mychild 呼叫 3.呼叫子元件的方法 parenthandleclick 為子元件的方法 注 在呼叫子元件的方法時 this.refs.my...

vue子元件呼叫父元件方法

說明 有乙個元件inputlistselect.vue,選中乙個行資料,將該資料傳送到父級projectedit.vue檔案中 1 父級projectedit.vue呼叫 import inputlistselect from views components inputlistselect exp...

vue 父元件呼叫子元件方法

情景 父元件傳入陣列子元件迴圈來建立不同的元件模組,所有事件都在子元件內部.父元件頁面的上方同時有乙個上傳按鈕上傳後會顯示在第乙個模組 設想思路 點選父元件中的按鈕觸發子元件中上傳方法 子元件上定義ref refname 父元件的方法中用this.refs.refname.method去呼叫子元件方...