访问组件并从App.vue组件触发click事件

Question

In my template I have one click event

<span v-on:click="showGalery()">

And I am using one method for it

export default {
  name: 'osaka',
  data: function () {
    return {
      galery: false,
    }
  },
  methods: {
    showGalery () {
      this.galery = true
    }
  }
}

Is it possible to trigger this method from App.vue template where is my nav and router links is located?

I am using vue-webpack template. I have components, router.js, App.js and main.js structure.

Answer 1

Remember Vue has a one way data flow, so if you want to set something on the component you can simply pass a prop and use a watcher to trigger the change:

Vue.component('gallery', {
  template: `<div v-show="gallery">Gallery</div>`,
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  created() {
    this.gallery = this.show;
  },
  watch: {
    show(val) {
      this.gallery = val;
    }
  },
  data() {
    return {
      gallery: false
    }
  }
});

Then in the parent you would have:

new Vue({
  el: '#app',
  data: {
    showGallery: false
  }
});

And use the following markup:

<gallery :show="showGallery"></gallery>

See this JSFiddle: https://jsfiddle.net/yx1uq370/

Incidentally, if you just want to show hide the entire component, then you can just use v-show on the component itself which

Vue.component('gallery', {
  template: `<div>Gallery</div>`
});

new Vue({
  el: '#app',
  data: {
    showGallery: false
  }
});

Then your markup:

<gallery v-show="showGallery"></gallery>

And here's the fiddle for that: https://jsfiddle.net/gfr9kmub/

One final thing, are you sure that you really need to trigger this from your nav? I would assume that your nav would display the views and the views themselves would take care of this type of state management. Otherwise you may want to look at vuex to handle this situation