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

我想使用

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>

我尝试对组件执行console.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重写它。因此，函数可能有问题，但现在的问题是传递的函数未定义。

多维数据集组件需要为

dragstartHandler

定义一个道具，以便它从父级接收道具并将其传递给div。

样式

和

类

绑定也是如此，它们也没有像您期望的那样工作，但是您没有看到错误，因为它们是内置绑定，被传输到根元素

Cube.vue

render（）{
...
},
道具：{
dragstartHandler：{
类型：功能，
},
}
多维数据集
组件需要为
dragstartHandler
定义一个道具，以便它从父级接收道具并将其传递给div。
样式
和
类
绑定也是如此，它们也不能按预期工作，但是您没有看到错误，因为这些是内置绑定，被传输到根元素

Cube.vue

render（）{
...
},
道具：{
dragstartHandler：{
类型：功能，
},
}
什么是dragstartHandler函数？这是你写的吗？是的，我写了两个函数dragstartMoveHandler和dragstartCopyHandler。我将dragstartMoveHandler传递给组件。我在问题中添加了函数dragstartHandler函数是什么？这是你写的吗？是的，我写了两个函数dragstartMoveHandler和dragstartCopyHandler。我将dragstartMoveHandler传递给组件。我在问题中添加了这个函数，谢谢你的回答。它现在运行良好。但我写的道具在渲染是没有用的？我已经看过文件了。那么，在数据对象中使用道具有什么用呢。文档只是说组件道具。不客气，我很高兴它有帮助。div不是一个组件，所以它没有道具，它只是将属性绑定作为根元素。如果是
CubeSide
组件接收数据道具，而不是
div
，那么就很清楚了。噢，谢谢你的回答。它现在运行良好。但我写的道具在渲染是没有用的？我已经看过文件了。那么，在数据对象中使用道具有什么用呢。文档只是说组件道具。不客气，我很高兴它有帮助。div不是一个组件，所以它没有道具，它只是将属性绑定作为根元素。如果是
CubeSide
组件接收数据道具，而不是
div
，那么就很清楚了。
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";
    },

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