多个事件附加到同一个道具（vue）

Question

文档：

https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model

不清楚（至少对我而言）如何将多个事件附加到同一个组件：

在：

https://codesandbox.io/s/dawn-dust-2tno0?file=/src/components/EditCategory.vue

这是发出绑定到同一道具的多个事件（edit/delete 类别）的正确方法吗：

  <div
    class="modal-body"
    v-bind:taskItem="taskItem"
    @click="$emit('edit-category', $event.target.taskItem)"
  >
    <slot name="name"> Edit Name </slot>
  </div>

  <div
    class="modal-body"
    v-bind:taskItem="taskItem"
    @click="$emit('delete-category', $event.target.taskItem)"
  >
    <slot name="delete"> Delete Category </slot>
  </div>

?

模型定义为：

  model: {
    prop: "taskItem",
    event: "edit-category",
  },
  props: {
    taskItem: {
      required: true,
      type: Object,
      default() {
        return {};
      },
    },
  },

文档中的示例：

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

没有明确说明如何为每个道具绑定多个事件；例如类似于：

  model: {
    prop: 'checked',
    event: 'event-a',
    event: 'event-b',
  },

?

Answer 1

这不是 v-model 有意义的情况。

v-model 只是对特定道具的抽象，当该道具值应该用新值更新时，组件将发出哪个事件。这对于具有 value 属性（字符串）的输入字段是有意义的，并且当应该更新该绑定时它会发出一个具有新值的 input 事件。

您的 taskItem 示例似乎不适合这种结构。 taskItem 是一个对象。可能会发生两种不同的操作：它的 category/name 可以被编辑或删除。在这两个操作中，您都没有替换整个 taskItem 对象，因此这不适合 v-model.

其他几件事：

您不能在 <div> 上使用 v-bind:taskItem。 <div> 不是组件，因此没有要绑定的 taskItem 属性。（Vue 可能会尝试将 div 上的 taskItem 属性设置为 taskItem 属性的字符串化值，这不是您想要的行为。）
您的 <div> 访问 $event.target.taskItem 的点击处理程序不存在（我想您认为 v-bind:taskItem 可以像这样访问它？）。 taskItem 作为组件的道具已经在范围内，因此您可以按原样使用它。

多个事件附加到同一个道具（vue）

Multiple events attached to the same prop (vue)

javascript

dom-events

vue.js

vue-component

vuejs2