Tiktok actual combat ~ the number of comments is updated synchronously

One 、 Quick start

1. Child components

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

2. Parent component

Parent component description ：
backHome ： Event is the method of sub component callback , It needs to be consistent with the sub component debugging method , You can customize
back： Custom method ; Need to be in the parent component's methods: {} Defined in the method area back Method , Handle as a callback method

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

3. The sub component calls back to the parent page

Child components

methods: {
    
	childBackHome(){
    
		this.$emit("backHome",e);  //backHome Method of parent component ,e Parameters to pass 
		}
}

4. The parent component receives the callback

Parent component , Method name of subcomponent callback

back(e){
    
  console.log(e) //e It's a parameter passed from val
}

5. The component invokes the process

Subcomponents can also be understood as public components , For other parent pages to import , Achieve the effect of public page or logic extraction

The component invokes the process

• 1. The parent component introduces the child component
• 2. Parent component transfers parameters to child component
• 3. The subcomponent receives parameters
• 4. Perform processing
• 5. After processing, send the result back to the parent component
• 6. The parent component receives the result returned by the child component
• 7. The parent component continues to perform subsequent processing

Two 、 Number of Tiktok comments

2.1. flow chart

2.2. Process brief

• Click the comment icon on the short video page
• Enter the comment window
  • Select new comment
  • Reply to comments
• Enter comments
• Submit comments
• Comment content at the top
• The number of comments in the comment window is updated
• The number of comments on short video pages has been updated

2.3. Appreciation of flow charts and renderings