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。