如何在 vue.js 中通过单击事件发出值 [英] how to emit a value with a click event in vue.js

查看：24
本文介绍了如何在 vue.js 中通过单击事件发出值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

代码如下:

Vue 模板:

<div class="容器"><div class="col-lg-offset-4 col-lg-4"><sidebar v-on:incrementBtn="increment += $event"></sidebar><p>{{增量}}</p>

Vue 实例:

 Vue.component('sidebar',{模板:`<div><button class="btn btn-info" v-on:click="$emit('incrementBtn', 1)">点击增量</button>

`，});新的 Vue ({el:'#app',数据:{增量:0}});

解决方案

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

如上 Vue 指南所述:

<块引用>

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

和

<块引用>

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

Vue.component('sidebar',{模板:`<div><button class="btn btn-info" v-on:click="$emit('increment-btn', 1)">点击增量</button>

`})新的 Vue ({el:'#app',数据 () {返回 {增量:0}}})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script><div id="应用程序"><div class="容器"><div class="col-lg-offset-4 col-lg-4"><sidebar v-on:increment-btn="increment += $event"></sidebar><p>{{增量}}</p>

I am following Vuejs documentation and trying to emit a value with click event.

The code follows:

Vue Template:

<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 instances:

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

解决方案

Check Vue Custom Event, Vue always recommends using kebab-case for event names.

And as above Vue guide said:

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

And

Additionally, v-on event listeners inside DOM templates will be automatically transformed to lowercase (due to HTML’s case-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>

这篇关于如何在 vue.js 中通过单击事件发出值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆