編輯組件中的Vuejs數據

Question

我正在使用具有兩個組件和兩個模板的Vue.JS。 它們被多次使用：

<compone v-show="! showcompone"></compone>
<compone v-show="! showcomptwo"></compone>

和

<comptwo v-show="! showcompone"></comptwo>
<comptwo v-show="! showcomptwo"></comptwo>

我的vuejs如下：

new Vue({
    el: '#app',
    data: function(){
        return {
            showcompone: true,
            showcomptwo: true,
        }
    }
});

我需要知道的是：如何使我的組件在點擊時切換v-show的data ？ 如何通過組件更改data屬性值？

有一個更好的方法嗎？

Answer 1

Vue可以為您處理事件，只需在組件v-on使用v-on指令或簡寫@ ，例如：

<button @click="showcompone = !showcompone">Toggle one</button>
<button @click="showcomptwo = !showcomptwo">Toggle two</button>

您傳遞給@click事件的是純JavaScript，因此您可以使用js調用函數或任何您想要的東西