我正在尝试将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永远不会被执行。
所以问题是如何将带有参数的事件处理程序正确传递给创建的元素？
这是因为您实际上是append在呈现内容时调用该函数。试试这个：
{
attrs: { size: 'mini' },
on: { click: this.append.bind(this, store, data) }
}
或使用与 JSX 代码段相同的解决方案：
{
attrs: { size: 'mini' },
on: { click: () => this.append(store, data) }
}
这两种方式都提供了一个在点击事件发生时被调用的函数。
请注意，on键是 的兄弟attrs，而不是内部。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句