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

2022-05-05 17:09:08 字數 744 閱讀 8706

子元件

child

父元件

點選

1. 首先父元件匯入子元件並且在components中定義子元件

2. 引用子元件,並定義ref,用於 this.$refs.mychild 呼叫

3. 呼叫子元件的方法(parenthandleclick()為子元件的方法)

注:在呼叫子元件的方法時 (this.$refs.mychild.parenthandleclick()方法),出現了parenthandleclick未定義的異常

這個問題出現是因為我沒有得到子元件的例項,所以呼叫的時候出現了undefined異常。子元件沒有在頁面初始化時載入,而是在點選某個特定的按鈕後才開始顯示載入。

子元件初始化的後就立馬執行呼叫子元件的方法,可能他還沒有初始化完成,所以出現了 undefined 的異常。

所以在呼叫子元件方法時,稍做一下延時處理:

settimeout(() => , 10)

vue父元件觸發子元件方法

通常來說是子元件觸發父元件的情況比較多。比如每次提交表單的時候封裝了常用的選項類子元件,選好值之後將值傳回父元件,父元件得到值這樣的操作。這是不用初始化頁面資料的情況。但是還有其他的情況就是已經選好了謀個服裝的品牌和品牌下的某個系列後 這是兩個相同的元件但是在父元件不同的地方呼叫 這時候我想換個品牌...

vue中父元件呼叫子元件

在vue中父元件操作子元件通常會用ref這個特性,結合文件我們來看下ref有哪些用法 官方定義 ref被用來給元素或者子元件註冊引用資訊。換句話講就是vue留了乙個操作原生dom元素或操作子元件例項的介面 當ref定義在元素或元件上,元素或元件資訊會被註冊在例項中的 refs物件上。1 操作單個do...

Vue中父元件向子元件通訊

元件例項的作用域是孤立的。子元件的模板中是無法直接呼叫父元件的資料。可以使用props將父元件的資料傳給子元件。子元件在接受資料時要顯示宣告props 看下面的例子 here china panda div src script src script vue.component panda new ...