How to send updated values from Parent component to child component in Vue JS?

Question

I am passing a variable from parent component to child component through props. But with some operation, the value of that variable is getting changed i.e. on click of some button in parent component but I did not know how to pass that updated value to child? suppose the value of one variable is false initially and there is Edit button in parent component. i am changing the value of this variable on click of Edit button and want to pass the updated value from parent to child component.

Answer 1

Your property's value should be updated dynamically when using props between parent and child components. Based on your example and the initial state of the property being false, it's possible that the value was not properly passed into the child component. Please confirm that your syntax is correct. You can check here for reference.

However, if you want to perform a set of actions anytime the property's value changes, then you can use a watcher.

EDIT:

Here's an example using both props and watchers:

HTML

<div id="app">     <child-component :title="name"></child-component> </div> 

JavaScript

Vue.component('child-component', {   props: ['title'],   watch: {     // This would be called anytime the value of title changes     title(newValue, oldValue) {       // you can do anything here with the new value or old/previous value     }   } });  var app = new Vue({   el: '#app',   data: {     name: 'Bob'   },   created() {     // changing the value after a period of time would propagate to the child     setTimeout(() => { this.name = 'John' }, 2000);   },   watch: {     // You can also set up a watcher for name here if you like     name() { ... }   } }); 

Answer 2

You can watch a (props) variable with the vue watch.

for example:

<script> export default {   props: ['chatrooms', 'newmessage'],   watch : {     newmessage : function (value) {...}   },   created() {     ...   } } </script> 

I hope this will solve your problem. :)