[Vuejs]-Really confused about emits in Vue2. How do I sync two booleans between child and parent?

by

1👍

Several things to do a little differently

1. Use a watcher, not a computed property, in the child

This is because you want to do something, not just compute a value locally.

2. Actively send the value from the child

Don’t expect the boolean value to travel by itself – you have to send it. Put it as an extra parameter in this.$emit.

3. In the parent, actively receive the value and act on it

In the @ attribute that receives the message, give it the name of your handler function that will act on it. But don’t call the function by putting parentheses (): just give the handler function’s name.

I have changed the handler’s name, to help this be self-documenting.

In that handler function, receive the parameter that has been emitted by the child, and act on it.

Example

Child:

watch: {
  isUploading(newValue){
       this.$emit("is-uploading-changed-to",newValue)
    }
}

Parent:

// in the template

<child @is-uploading-changed-to="childUploadingChangedTo" />


// in the script methods

childUploadingChangedTo(newVal){
    this.uploadStatus = newVal;
    console.log("Parent this.uploadStatus has changed to ",this.uploadStatus)
}

Obviously you don’t need the console.log.

Once you can see that your parent this.uploadStatus, you can pass it as a parameter to the second child.

<second-child :uploadStatus="uploadStatus" />
👤ProfDFrancis

Leave a comment