从组件编辑 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 指令或简写@，例如：

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

你传递给@click事件的是纯javascript，所以你可以用js调用一个函数或者你想要的任何东西