多个事件连接到同一道具(vue)

icomxhvb  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(236)

文件:
https://vuejs.org/v2/guide/components-custom-events.html#customizing-组件v模型
不清楚(至少对我来说)如何将多个事件附加到同一组件:
在:
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)"
    >
  `
})

没有明确说明如何为每个道具绑定多个事件;e、 g.类似于:

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

?

kyvafyod

kyvafyod1#

这不是一种 v-model 有道理。 v-model 只是特定道具的抽象,当道具值应该用新值更新时,组件将发出哪个事件。这对于具有 value 道具(一根弦),它会发出 input 应更新该绑定时使用新值的事件。
看起来不像是你的 taskItem 这个例子适合这种结构。 taskItem 是一个物体。可能发生两种不同的操作:其类别/名称可以编辑或删除。你不能替换整个系统 taskItem 对象,因此这不适合 v-model .
还有几件事:
你不能用 v-bind:taskItem<div> . <div> 不是组件,因此没有 taskItem 绑定到的支柱(vue可能会尝试设置 taskItem 属性的字符串化值 taskItem 道具,这不是您想要的行为。)
您的 <div> 访问 $event.target.taskItem 这是不存在的(我想你认为 v-bind:taskItem 会让它像那样容易接近吗?)。 taskItem 作为组件上的道具已在范围内,因此您可以按原样使用它。

相关问题