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

Question

在我的模板我有一个click事件

<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-显示组件本身上

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

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

然后你的标记：

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

下面是为小提琴：https://jsfiddle.net/gfr9kmub/

最后一点，你确定你真的需要触发此FR你的导航？我会假设你的导航会显示视图，并且视图本身会照顾这种类型的状态管理。否则，你可能想看看vuex来处理这种情况