vue.js - 如何在 vue.js 中通过点击事件发出一个值

Question

我正在关注 Vuejs 文档并尝试通过点击事件发出一个值。

代码如下:

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 Custom Event ，Vue 始终建议使用 kebab-case 作为事件名称。

正如上面 Vue 指南所说:

Unlike components and props, event names don’t provide any automaticcase transformation. Instead, the name of an emitted event mustexactly match the name used to listen to that event.

和

Additionally, v-on event listeners inside DOM templates will beautomatically transformed to lowercase (due to HTML’scase-insensitivity), so v-on:myEvent would become v-on:myevent – making myEvent impossible to listen to.

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 () {
    return {
      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>