文件:
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',
},
?
1条答案
按热度按时间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
作为组件上的道具已在范围内,因此您可以按原样使用它。