如何在vue.js中通过单击事件发出值

我正在关注Vuejs文档，并尝试使用click事件发出一个值

守则如下：

Vue模板：

<div id="app">
    <div class="container">
        <div class="col-lg-offset-4 col-lg-4">
            <sidebar v-on:incrementBtn="increment += $event"></sidebar>
            <p>{{ increment }}</p>
        </div>
    </div>
</div>

    Vue.component('sidebar',{
        template:`
            <div>
                <button class="btn btn-info" v-on:click="$emit('incrementBtn', 1)">Increment on click</button>
            </div>
        `,
    });

    new Vue ({
        el:'#app',
        data:{
            increment:0
        }
    });

{{increment}}

Vue实例：

<div id="app">
    <div class="container">
        <div class="col-lg-offset-4 col-lg-4">
            <sidebar v-on:incrementBtn="increment += $event"></sidebar>
            <p>{{ increment }}</p>
        </div>
    </div>
</div>

    Vue.component('sidebar',{
        template:`
            <div>
                <button class="btn btn-info" v-on:click="$emit('incrementBtn', 1)">Increment on click</button>
            </div>
        `,
    });

    new Vue ({
        el:'#app',
        data:{
            increment:0
        }
    });

Vue.component（'sidebar'{
模板：`
单击时增量
`,
});
新Vue({
el:“#应用程序”，
数据：{
增量：0
}
});

检查，Vue始终建议对事件名称使用烤肉串大小写

正如上面Vue指南所说：

与组件和道具不同，事件名称不提供任何自动设置 案例转换。相反，必须指定已发出事件的名称 与用于侦听该事件的名称完全匹配

及

此外，DOM模板内的v-on事件侦听器将 自动转换为小写（由于HTML的 不区分大小写），因此v-on:myEvent将变成v-on:myEvent–使myEvent无法收听

Vue.component（'sidebar'{
模板：`
单击时增量
`
})
新Vue({
el:“#应用程序”，
数据（）{
返回{
增量：0
}
}
})

{{increment}}