To handle this situation differently, one approach is to trigger a custom event from the child component when there is a change (originating from the child). Subsequently, this event can be detected and acted upon in the parent component, which then calls a method. This method can, in turn, execute child methods to update the relevant values.
The fundamental question here is: why resort to such steps? If the parent component serves as the ultimate source of truth (i.e., passing data via props to child components), monitoring these prop changes or utilizing computed props to retrieve updated values should suffice. In essence, there's no necessity for events to activate methods at all.
In summary, your operational strategy could be summarized as follows:
Send parent values (maintained in parent data) as props to child components. The child components will automatically adjust their inherited properties based on updates in these props.
The parent configuration settings can also be stored in localStorage concurrently. This can be accomplished by consistently watching for alterations in parent data using the watch functionality. When necessary, you can read from localStorage again during parent remounting (e.g., page reload)—leveraging the mounted lifecycle hook. The resultant modifications would, once more, propagate to child components per point #1.
An illustrative example (for demonstration of the localStorage feature functionality, please refer to this fiddle since code excerpts are confined within sandboxes):
Vue.component('child-component-a', {
template: '<div><h2>Child component A</h2><p>I multiply inherited parent value by 2: <strong>{{ computedNumber }}</strong></p></div>',
props: {
number: {
type: Number
}
},
computed: {
computedNumber() {
return this.number * 2;
}
}
});
Vue.component('child-component-b', {
template: '<div><h2>Child component B</h2><p>I divide inherited parent value by 16: <strong>{{ computedNumber }}</strong></p></div>',
props: {
number: {
type: Number
}
},
computed: {
computedNumber() {
return this.number / 16;
}
}
});
var app = new Vue({
el: '#app',
data: {
parentNumber: 1024
},
watch: {
parentNumber() {
// Store parent number in localStorage when updated
// *NOTE: Disabled in this code snippet since it is sandboxed
// localStorage.setItem('parentNumber', this.parentNumber);
}
},
mounted() {
// Overwrite parent data if localStorage is found
// *NOTE: Disabled in this code snippet since it is sandboxed
// if (localStorage.getItem('parentNumber') !== null) {
// this.parentNumber = localStorage.getItem('parentNumber');
// }
}
});
html {
font-family: Arial, sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
<div>
<h1>Parent component</h1>
<p>I have a value of <strong>{{ parentNumber }}</strong>.</p>
<p>But wait, you can change my number!</p>
<input v-model="parentNumber" type="number" />
</div>
<child-component-a v-bind:number="parentNumber"></child-component-a>
<child-component-b v-bind:number="parentNumber"></child-component-b>
</div>