[Vuejs]-Changing parent component from child components in vue.js

by

0👍

✅

You can listen to an event in router-view tag and act accordingly:

const child = {
  template: `<div style="margin-bottom:100px">
     <button @click="$emit('clicked')">Toggle div</button>
  </div>`
}

const router = new VueRouter({
  routes: [ { path: '/child', component: child } ]
})

new Vue({
  router,
  el: '#app',
  data: { displayMe: 'block' },
  methods: {
    toggleMe: function() {
      this.displayMe = (this.displayMe === 'block') ? 'none' : 'block';
    }
  }
})
#hideme {
  width: 100px;
  height: 100px;
  background: orange
}
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <div>
    <div id="hideme" :style="{display: displayMe}"></div>
  </div>
  <router-link to="/child">Visit child</router-link>
  <router-view @clicked="toggleMe()"></router-view>
</div>

For multiple divs you can pass some data with events, and receive it in $event argument of your handler function (example: toggleMe($event)), and resolve style properties individually. You can track each div using ref attribute for example, and save status inside data object with structure like { '1': 'block', ...} and retrieve styles using a method.

Leave a comment