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

Question

我想使用 Vue.js 渲染函数在 javascript.Now 中制作组件我可以制作一个 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 方法的使用不正确，因为您传递了错误的参数系列。

首先，根据 documentation，您应该通过按钮属性对象设置内部 html +，而不是通过为数据对象保留的第二个参数：

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

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

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

其次，您应该根据上述文档将 buttonAttrs 作为 createElement 调用中的第二个参数传递：

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

看到这个工作 codepen。

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

vue.js add event listener to button in Render function

javascript

vue.js

vue-component