如何參數傳遞給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方法

回答

相關問題