Question

在我的模板中，我有一个点击事件

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

我正在使用一种方法

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

是否可以从App.vue模板触发此方法，我的导航和路由器链接位于何处？

我正在使用vue-webpack模板。我有组件，router.js，App.js和main.js结构。

Answer 1

记住Vue有一个单向数据流，所以如果你想在组件上设置一些东西，你可以简单地传递一个道具并使用watcher来触发改变：

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
    }
  }
});

然后在父母那里你会：

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

并使用以下标记：

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

请参阅此JSFiddle：https://jsfiddle.net/yx1uq370/

顺便提一下，如果你只想隐藏整个组件，那么你可以在组件本身上使用v-show

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

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

然后你的标记：

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

这就是小提琴：https://jsfiddle.net/gfr9kmub/

最后一件事，你确定你真的需要从导航中触发这个吗？我认为你的导航会显示视图，而视图本身会处理这种类型的状态管理。否则，您可能需要查看vuex来处理这种情况

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

1 个答案: