Communication problems between vue parent and child components

suppose my parent component has two attributes An and B, and the child component updates accordingly whenever both An and B are updated, then the problem arises. If I write two watcher in the child component, sometimes A will be updated and B will trigger the refresh of the child component before the update is finished. Does it have to be determined in the parent component that both An and B are updated and then passed to the child component? (an and B choose A first to determine B, for example, An is a store, B is something in the store)

May.12,2022

I don't know what update you are talking about. As far as I understand it, you may not use the watch method;
< template >

<div>
    
    <span @click="onChange(1)">{{obj.value1}}</span>
    <span @click="onChange(2)">{{obj.value2}}</span>
    <child-tamplate ref="childTamplate" />
</div>

< / template >
< script >

data(){
    reuturn{
       obj: {
         vlaue1: "",
         vlaue2: ""
       }
    }
},
method: {
    onChange(type){
        const oldObj = JSON.parse(JSON.stringify(this.obj));
        if(type==1){
            // 
            console.log(11)
        }else{
            // 
            console.log(222)
        };
        if((oldObj.vlaue1 !== this.obj.vlaue1)&&(oldObj.vlaue2 !== this.obj.vlaue2)){
            // 
            this.$refs.childTamplate.update();
        }
    }
}

< / script >


since the logic of AB is so clear in the parent component, just put the logic of AB B in the parent component and wait for B to notify the child component when it is updated.

Menu