文章目录
- 一、快速入门
- 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. 流程图效果图鉴赏
