How could I change an image in a child page when pressing a button in its parent page?-CodePudding

I have a DefaultLayout component with a dark mode toggle button which is its own component. One if its children (DefaultLayout's) is About.vue where I want a specific image to change its src depending on a localStorage value that can be set to either 'dark' or 'light'.

I've managed to read the localStorage value but the image does not change unless I refresh the page.

I'm new to Vue so I'm lost on how I can create a method to do this in DefaultLayout and change a variable in its child. I've tried to use an emit with no luck.

Could anyone point me in the right direction?

CodePudding user response：

Yes, the local storage is for keeping data not propagate events. The simplest way for you is to make a param in child component and pass the value by this param. But if you want to implement it as global variable the suggested way is by Pinia.

CodePudding user response：

Below is a simple example

Vue.component('About', {
 name: 'About',
 template: `<div>
   <div v-if="mode==='dark'">Dark</div>
   <div v-else>Light</div>
  </div>
 `,
 data() {
  return {
   mode: 'light',
  };
 },
 mounted() {
  this.setMode('white'); // In realtime use `this.getMode()` instead of 'white'
 },
 methods: {
   setMode(val) {
     this.mode = val;
   },
   getMode() {
     return JSON.parse(localStorage.getItem('mode'));
   }
 }
});

var app = new Vue({
 el: "#app",
 template: `<div>
   <input type="checkbox" v-model="toggler" @input="setVal" />
   <About ref="about" />
 </div>`,
 data() {
  return {
    toggler: false,
  };
 },
 methods: {
   setVal() {
    const mode = this.toggler === false ? 'dark' : 'light';
    // localStorage.setItem('mode', mode); // In realtime uncomment this line
    this.$refs.about.setMode(mode);
   }
 }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
</div>