多个事件附加到同一个道具（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

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

  <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 只是对特定 prop 的抽象，当该 prop 值应该用新值更新时，组件将发出哪个事件。这对于具有 value 属性（字符串）的输入字段之类的东西是有意义的，并且在应该更新绑定时它会发出带有新值的 input 事件。

您的taskItem 示例似乎不适合这种结构。 taskItem 是一个对象。可能会发生两种不同的操作：可以编辑或删除其类别/名称。您不会在其中任何一个操作中替换整个 taskItem 对象，因此这不适合 v-model。

其他几件事：

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