訪問從App.vue組件的組件並觸發click事件

在我的模板我有一個click事件訪問從App.vue組件的組件並觸發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結構。

來源

2017-06-06 mmiloshev

所以這是在一個子組件，你想從父級觸發它？或者在父母處理？ –

最好使用來自父組件的屬性 –

如果你的「osaka」組件遠離你的App.vue，你應該使用flux模式來從任何地方觸發'showGalery（）'。 –

記住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來處理這種情況

來源

2017-06-06 09:29:13

感謝您的詳細解答！我使用vue-webpack模板，所以它有點不同。我是Vue的初學者，所以我很努力做這個工作。 – mmiloshev

你有什麼問題？如果您的畫廊是通過'vue-router'呈現的，那麼您可能需要重新思考如何通過使用'vuex'或將顯示/隱藏功能移動到視圖本身來獲取畫廊組件的信息，畫廊組件作爲一個孩子而不是畫廊是實際的觀點。 –

訪問從App.vue組件的組件並觸發click事件

回答

相關問題