vue.js在渲染函数中添加事件监听器按钮

Question

我想使用Vue.js渲染函数在javascript中创建组件。现在我可以制作一个HTML结构一个SPAN和一个BUTTON.when单击按钮时，我期望它在控制台输出，但它只是不work.here是我的代码：

<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> 

或codepen 任何反应是欢迎，谢谢。

Answer 1

由于您传递了错误的一系列参数，因此在构建按钮时，您使用createElement方法不正确。

首先，你应该通过您的按钮属性设置内部HTML +对象，而不是通过其被保留用于所述数据对象的第二个参数，每documentation：

// {Object} 
// A data object corresponding to the attributes 
// you would use in a template. Optional. 
{ 
    // (see details in the next section below) 
}, 

这样，你应该按照以下方式构造按钮对象：

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

其次，你应该传递buttonAttrs作为第二个参数在按照上述文件的createElement电话：

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

看到这个工作codepen。