如何動態在我的自定義網格組件

Question

<template> 
    <tbody> 
    <template v-for="(row,index) in datalist"> 
    <tr @click="rowevent != null?rowevent(row,this.$el):''" :class="index % 2 === 0?bodytrclass[0]:bodytrclass[1]"> 
     <td v-if="col.show" v-for="col in collist" @click="eventbus(row,$event)" @mouseover="eventbus(row,$event)"> 
     <template v-if="col.type"> 
      <component v-for="com in col.type" :is="com" :rowdata="row" :colname="col.colname" 
        :tdcbfun="col.cbfun"></component> 
     </template> 
     <template v-else>{{ row[col.colname] }}</template> 
     </td> 
    </tr> 
    </template> 
    </tbody> 
</template> 
``` 

現在問題

`<tr @click="rowevent != null?rowevent(row,this.$el):''" :class="index % 2 === 0?bodytrclass[0]:bodytrclass[1]">` 

我怎樣才能通過數據（道具）事件添加事件添加標籤？動態v-on？ 我不想寫@單擊@mouseover @ .......

我想這樣的....

``` 
props: { 
    trevent: [{event:'click',eventfun:function (rowdata) { 
    if(rowdata.age<10){ //@:click=eventfun(rowdata) 
     alert('children') 
    } 
}},{event:'mouseover',eventfun:function (rowdata) { 
    if(rowdata.age<10){//@mouseover=eventfun(rowdata) 
     tip('children') 
    } 
}}] 
} 
``` 

另一個例子按鈕組件

``` 
<template> 
    <div> 
    <button @click="eventbus" @mouseover="eventbus">{{options.btnname}}</button> 
    </div> 
</template> 

methods: { 
     eventbus: function (rowdata, event) { 
     var eventname = event.type 
     var eventpos = event.currentTarget.localName 

     this.$root.$emit(eventpos + eventname, rowdata) 
     } 
    } 

vm.$on('trclick',function(){ 
.......do something 
}) 
``` 

如果有時排放不$就不這樣做...這種解決所以.....

和我也可以使用組件：是但javaer必須寫組件太多 哦v-if

對不起，我的英語..

終於可以寫中文了
我們公司正在開發一個公共組件，剛開始做現在正在做表格的組件。 這個組件是通用的，想用在公司的不同的系統上，也是開源的。 麻煩大家幫看看現在如何可以根據傳入的道具數據，動態添加事件到某個標籤上？ 我找不到辦法動態添加v-on
想做的功能多一些還不想總讓研發人員寫動態的組件
我儘量將vue封裝成jquery那種用形式，大家都比較容易會。 其次是我現在在mainjs裏把vue寫好的組件暴露出來window。$ grid = grid.vue然後在引入webpack打包好的js 然後直接使用請問還有其他更好的關於把vue做成組件在外部調用的例子嗎？ 還有如果我這種方式引用的話是否還能使用vue-router？最好給個例 最近半個月狂看Vue在此感謝下尤大出出這麼好的東西！ 借給裏給大家拜個早年，祝各位在新的一年裏身體健康，生活幸福！英語不好麻煩各位了

Answer 1

這可能不是最好的概念來修改它被編譯後的組件DOM的事件偵聽器。如果從Evan You（vuejs的創建者）發現此報價here：

我認爲你正在接近這個錯誤的假設。組件的模板是靜態的，一旦定義了它就不能改變它。您需要表達模板內可能更改的部分。

它可以作爲recompile a component template顯示Elfayerhere，但它並沒有對這個問題提高優美，因爲人們必須爲屬性的每個配置的模板。對於一個事件屬性來說沒有問題，你需要兩個模板。但三場比賽，你會需要已經8個模板等...

選項1：正常的事件處理程序

使用正常的事件處理程序，其執行動態事件偵聽器的條件執行內處理邏輯。 在您的模板，你可以更換

<template> 
... 
    <tr @click="rowevent != null?rowevent(row,this.$el):''" :class="index % ... 
... 
</template> 

有：

<template> 
... 
    <tr @click="tr_handler(row,this.$el)" :class="index % ... 
... 
</template> 

，然後使用tr_handler()方法來檢查是否有分配給某個屬性或不是一個事件監聽：

methods: { 
    //... 
    tr_handler: function(row,e) { 
     if (this.rowevent) { 
     return this.rowevent(row, e) 
     } 
    } 
    //... 
} 

這種方法提供了一個乾淨的結構並保留了vuejs的字符串模板特徵。

選項2：使用render()功能

人們可以通過使用動態render function使整個模板。也可以將事件監聽器應用到後面鏈接中描述的節點上：

on: { 
    '!click': this.doThisInCapturingMode, 
    '~keyup': this.doThisOnce, 
    `~!mouseover`: this.doThisOnceInCapturingMode 
} 

這兩種方法都不能避免在模板中聲明事件。 Here is some statement about this它解釋瞭如何在vue世界中完成事情。

由於您不必手動在JS中附加事件偵聽器，因此您的 ViewModel代碼可以是純邏輯和無DOM的。這使得更容易 測試。