Javascript 将事件传递到vue中的渲染组件

我正在尝试创建一个渲染组件，当我单击它时，它将执行某些操作：

// A normal Vue component using a render function
Vue.component('greeting', {
    methods: {
        sayHello(){
            alert('hello')
        }
        
    },
    render(createElement){
        var self = this
        return createElement(
            'button', 
            {
                '@click': self.sayHello
            },
            'if you click here I will say hello')
    }
})


new Vue({ 
    el: '#app'
})

当我点击按钮时，我期待一个警报。据我所知，这将导致

<button @click="sayHello" />

其中，在Vue实例中定义了方法sayHello

为什么这样不行

---

看起来需要将传递的事件指定为“开”，如下所示：

{ 
  on: {
   click: somefunction
  }

}

---

我已经在这把小提琴中创建了一份您的示例的工作副本。我修改了我们编写单击事件的方式。请参阅下面的代码片段

Vue.component（'DraggableList'{
方法：{
你好{
警报（“你好”）
}
},
渲染：函数（createElement）{
var self=这个；
返回createElement(
'按钮'，//标记名
{
关于：{
点击：this.sayHello
}
}“如果你点击这里，我会打招呼”
)
}
})
新Vue({
el:“#应用程序”
})

.grid{
显示：网格；
网格模板列：重复（2，1fr）；
填料：2米；
网格间距：1米；
}
h1{
保证金：0；
填充：0；
}
.网格输入{
网格列开始：1；
网格柱端：3；
文本对齐：居中；
字号：1.5em；
}
.礼貌{
字体系列：草书；
颜色：灰色；
}
.粗鲁{
字体系列：衬线；
字体大小：粗体；
颜色：红色；
}

为什么不直接使用

模板

来创建按钮？@Vipulw我正在处理一个更复杂的问题，需要将事件传递给渲染函数。“这应该是一个简单的例子，不是有用的。请解释你的答案和你做了什么。”达曼我在问题评论中与此人讨论了方法，然后只给出了解决方案。另外，通过包含代码片段，可以非常清楚地理解。下次我会记得的。