如何将函数传递给组件以处理拖动事件

Question

我想使用v-for和is来呈现我需要的组件。所以我创建了这样的组件Cube.vue：

<script>
export default {
name: 'cube',
render: function(createElement) {
return createElement("div",{
props: {
style: {
type: Object
},
dragstartHandler: {
type: Function
},
classNames: {
type: Array|String|Object
}
},
style: this.style,
attrs: {
draggable: "true",
},
on: {
dragstart: this.dragstartHandler
},
'class': this.classNames
},[
createElement("div",{
class: ["resizer", "top-left"]
}),
createElement("div",{
class: ["resizer", "top-right"]
}),
createElement("div",{
class: ["resizer", "bottom-left"]
}),
createElement("div",{
class: ["resizer", "bottom-right"]
}),
])
}
}
</script>

然后，我像这个一样使用它

<component
v-for="component in components"
:class="component.classes"
:key="component.refValue"
:is="component.type"
:style="component.style"
:dragstartHandler="component.dragstartHandler"
:ref="component.refValue"
>
</component>

一切如我所料，除了dragstartHandler。它抛出错误

[Vue warn]: Invalid handler for event "dragstart": got undefined

我尝试控制台.log((组件。结果是：

[{…}, __ob__: Observer]
0:
classes: Array(2)
dragstartHandler: ƒ ()
refValue: "cube-0"
style: Object
type: "cube"

这确实是一种功能。但我不知道为什么它在渲染中会变成未定义的。我查过我没有拼写错。我只想将函数传递给组件来处理拖动事件。那么它是怎么发生的，我该怎么解决它呢。dragHandler函数如下：

dragstartCopyHandler(event) {
event.dataTransfer.setData("elementId", event.target.id);
event.dataTransfer.setData("componentOffsetX", event.offsetX);
event.dataTransfer.setData("componnetOffsetY", event.offsetY);
event.dataTransfer.setData("dropEffect", "copy");
event.dataTransfer.dropEffect = "copy";
},
dragstartMoveHandler(event) {
console.log("move start")
event.dataTransfer.setData("elementId", event.target.id);
event.dataTransfer.setData("componentOffsetX", event.offsetX);
event.dataTransfer.setData("componnetOffsetY", event.offsetY);
event.dataTransfer.setData("dropEffect", "move");
event.dataTransfer.dropEffect = "move";
},

然后我将dragstartMoveHandler传递给组件。

this.components.push({
refValue: `${elementId}-${this.count}`,
type: elementId,
style: style,
dragstartHandler: this.dragstartMoveHandler,
classes: ["component", elementId]
});

我以前用js来控制Dom写页面。今天我想用vue重写它。因此，函数可能有问题，但现在的问题是传递的函数未定义。

Answer 1

cube组件需要为dragstartHandler定义一个prop，以便它从父级接收它，以便将它传递给div。style和class绑定也是如此，它们也没有像您预期的那样工作，但您不会看到错误，因为它们是传输到根元素的内置绑定。

立方体.vue

render() {
...
},
props: {
dragstartHandler: {
type: Function,
},
}