Question

所以我有以下元素：

<input v-on:click="$emit('addPartId', $event)" v-bind:value="13209" name="add_13209" type="checkbox">

然后调用以下方法：

 methods: {
        ....

        addPartId(evnt) {
            console.log(evnt);
        }
    },

在父容器中并传递给子容器：

    <table-body
        v-bind:items="items"
        v-bind:columns="columns"
        v-bind:sort-column="sortColumn"
        v-bind:direction="direction"
        @sort="sort"
        @addPartId="addPartId"
        >
    </table-body>

我在堆栈上找不到的问题是如何注册click事件，以便在单击复选框时，我得到事件对象（我希望从{{1 }}。

Answer 1

您应使用事件名称，该名称为以烤肉串为例的版本，选中Vue Guide: Custom Event，

如指南所述：

与组件和道具不同，事件名称永远不会用作   JavaScript中的变量或属性名称，因此没有理由使用   camelCase或PascalCase。此外，DOM内部的v-on事件侦听器   模板将自动转换为小写字母（由于   HTML不区分大小写），因此v-on：myEvent将变为v-on：myevent   –使myEvent无法收听。

由于这些原因，我们建议您始终使用kebab-case进行事件   名称。

Vue.component('my-checkbox', {
  template: `
    <input v-on:click="$emit('add-part-id', {'whole': $event, 'value':13209})" v-bind:value="13209" name="add_13209" type="checkbox">
  `
})

Vue.component('my-another-checkbox', {
  template: `
    <input v-on:click="$emit('add-part-id', $event)" v-bind:value="13209" name="add_13209" type="checkbox">
  `
})

new Vue({
  el: '#emit-example-simple',
  methods: {
    getChecked1: function (ev) {
      console.log('checkbox1', ev.value)
      console.log('checkbox1', ev.whole.target.value)
    },
    getChecked2: function (ev) {
      console.log('checkbox2', ev.target.value)
    }
  }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="emit-example-simple">
  First Example: <my-checkbox @add-part-id="getChecked1"></my-checkbox>
  Second Example: <my-another-checkbox @add-part-id="getChecked2"></my-another-checkbox>
</div>

我应该如何获取复选框的值？

1 个答案: