Javascript vue.js将事件侦听器添加到渲染函数中的按钮

我想使用Vue.js Render函数在javascript中制作组件。现在我可以制作一个HTML结构，一个跨度和一个按钮。当我单击按钮时，我希望它在控制台中输出，但它不起作用。下面是我的代码：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <counter></counter>
</div>
<script>
    var a = {
           data () {
              return {count: 1}
            },
            methods: {
              inc () {console.log(this.count)}
            },
            render:function(h){
              var self = this
              var buttonAttrs ={
                    on:{click:self.inc}
                  }
              var span = h('span',this.count.toString(),{},[])
              var button = h('button','+',buttonAttrs,[])
              return h('div' 
                ,{},
                [
                  span,
                  button
                ])

            }
      }

  new Vue({
    el:'#app',
    components:{
      counter : a
     }}
  )

</script>

变量a={
数据（）{
返回{count:1}
},
方法：{
inc（）{console.log（this.count）}
},
渲染：函数（h）{
var self=这个
按钮={
在：{click:self.inc}
}
var span=h（'span'，this.count.toString（），{}，[]））
var button=h（'button'、'+'，buttonAttrs，[]））
返回h（'div'
,{},
[
跨度
按钮
])
}
}
新Vue({
el:“#应用程序”，
组成部分：{
柜台：a
}}
)

或者

---

欢迎任何回复，谢谢。

在构建按钮时，您使用的

createElement

方法是不正确的，因为您传递了一系列错误的参数

首先，您应该通过按钮属性对象设置内部html

+

，而不是通过为数据对象保留的第二个参数，根据：

因此，您应该按如下方式构造buttonsAttrs对象：

var buttonAttrs = {
    on: { click: self.inc },
    domProps: {
        innerHTML: '+'
    },
};

其次，根据上述文档，您应该在

createElement

调用中将buttonAttrs作为第二个参数传递：

var button = h('button', buttonAttrs, []);

看到这个了吗

var button = h('button', buttonAttrs, []);