抖音實戰~評論數量同步更新

文章目錄

• ​​一、快速入門​​

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

• ​​二、抖音評論數量​​

• ​​2.1. 流程圖​​
• ​​2.2. 流程簡述​​
• ​​2.3. 流程圖效果圖鑒賞​​

一、快速入門

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.父元件繼續執行以後的處理

二、抖音評論數量

2.1. 流程圖

2.2. 流程簡述

• 短視訊頁面點選評論圖示
• 進入評論視窗

• 選擇新增評論
• 回複評論

• 輸入評論内容
• 送出評論内容
• 評論内容置頂
• 評論視窗評論數量更新
• 短視訊頁面評論數量更新

2.3. 流程圖效果圖鑒賞