如何参数传递给Vue的$的createElement方法

我想在http://element.eleme.io/#/en-US/component/tree#custom-node-content将从例如JSX代码的Vue $的createElement代码

原始代码片段：

renderContent(h, { node, data, store }) { 
    return (
     <span> 
     <span> 
      <span>{node.label}</span> 
     </span> 
     <span style="float: right; margin-right: 20px"> 
      <el-button size="mini" on-click={() => this.append(store, data) }>Append</el-button> 
      <el-button size="mini" on-click={() => this.remove(store, data) }>Delete</el-button> 
     </span> 
     </span>); 
    } 
}

和我试图改变：

renderContent (h, { node, data, store }) { 
    return h('SPAN', [ 
     h('SPAN', [h('SPAN', node.label)]), 
     h('SPAN', {attrs: {style: 'float: right; margin-right: 20px'}}, [ 
     h('el-button', { attrs: { size: 'mini', on: { click: this.append(store, data) } } }, 'Append'), 
     h('el-button', { attrs: { size: 'mini', on: { click: this.delete } } }, 'Delete') 
     ]) 
    ]) 
    }

但它失败：按钮Append总是呈现为每个节点的时间执行，绝不之后。尽管按钮Delete从未执行。

所以问题是如何将正确的事件处理程序与参数传递给创建的元素？

来源

2017-08-11 htonus

这是因为您在渲染内容时实际上调用了append函数。试试这个：

{ 
    attrs: { size: 'mini' }, 
    on: { click: this.append.bind(this, store, data) } 
}

或使用相同的解决方案，在JSX片段：

{ 
    attrs: { size: 'mini' }, 
    on: { click:() => this.append(store, data) } 
}

两种方式提供一种功能，当点击事件发生时被调用。

请注意，on键是兄弟attrs，不在里面。

来源

2017-08-11 12:17:26

第一种方法给出错误：渲染函数错误：“TypeError：无法读取属性”绑定“的未定义，第二 - 没有错误，但什么也没有 – htonus

这很奇怪......这是怎么可能的'这.append（store，data）'在你的代码中不会抛出错误？ –

你是对的我打错了函数名。所以没有错误和事件处理程序没有被触发。然后我再次检查文档，发现把'on'键放在错误的地方 - attrs定义中。修好后 - 一切正常。非常感谢！ – htonus

如何参数传递给Vue的$的createElement方法

回答

相关问题