抖音实战~评论数量同步更新

文章目录

• ​​一、快速入门​​

• ​​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. 流程图效果图鉴赏