uni-app 子元件調用父元件的方法（vue同樣适用）

文章目錄

• ​​一、快速入門​​

• ​​1. 子元件​​
• ​​2. 父元件​​
• ​​3. 子元件回調父頁面​​
• ​​4. 父元件接收回調​​
• ​​5. 元件調用流程​​

一、快速入門

1. 子元件

<view @click='childBackHome'></view>      

2. 父元件

父元件說明：

backHome ：事件為子元件回調的方法，需要和子元件會調方法一緻即可，可以自定義

back：自定義方法；需要在父元件的 methods: {}方法區中定義back方法，作為回調方法處理

<dev @backHome='back'></dev>      

3. 子元件回調父頁面

子元件

methods: {
  childBackHome(){
    this.$emit("backHome",e);  //backHome父元件的方法,e要傳遞的參數
    }
}      

4. 父元件接收回調

父元件中，子元件回調的方法名

back(e){
  console.log(e) //e是傳過來的參數val
}      

5. 元件調用流程

• 1.父元件引入子元件
• 2.父元件傳參子元件
• 3.子元件接收參數
• 4.執行處理
• 5.處理完成将結果回傳父元件
• 6.父元件接收子元件回傳結果
• 7.父元件繼續執行以後的處理