Question

我试图将JSX代码从http://element.eleme.io/#/en-US/component/tree#custom-node-content的示例转换为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从未执行过。

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

Answer 1

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

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

或使用与JSX代码段相同的解决方案：

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

两种方式都提供了在单击事件发生时调用的函数。

请注意，on键是attrs的兄弟，而不是内部。

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

1 个答案: