vue.js 將事件監聽器添加到渲染函數中的按鈕

Question

我想使用 Vue.js Render 函數在 javascript 中制作組件。現在我可以制作一個 SPAN 和一個 BUTTON 的 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>

或在codepen歡迎任何回復，謝謝。

Answer 1

在構建按鈕時，您對createElement方法的使用不正確，因為您傳遞了錯誤的一系列參數。

首先，根據文檔，您應該通過按鈕屬性對象設置內部 html + ，而不是通過為數據對象保留的第二個參數：

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

因此，您應該按如下方式構建您的 buttonAttrs 對象：

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

其次，您應該根據上述文檔在createElement調用中將 buttonAttrs 作為第二個參數傳遞：

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

請參閱此工作代碼筆。