如何使用vue.js中的click事件发出值

Question

我是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实例:

    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
        }
    });

Answer 1

检查Vue自定义事件,Vue始终建议使用kebab-case作为事件名称.

如上Vue指南所说:

与组件和道具不同,事件名称不提供任何自动大小写转换.相反,发出的事件的名称必须与用于侦听该事件的名称完全匹配.

和

此外,DOM模板中的v-on事件侦听器将自动转换为小写(由于HTML不区分大小写),因此v-on:myEvent将成为v-on:myevent - 使myEvent无法收听.

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
    <div class="container">
        <div class="col-lg-offset-4 col-lg-4">
            <sidebar v-on:increment-btn="increment += $event"></sidebar>
            <p>{{ increment }}</p>
        </div>
    </div>
</div>