vuejs2 - 如何动态地将事件添加到我的自定义网格组件中的标签

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]">`

如何通过数据( Prop )添加事件？动态 v-on？ 我不想写@click @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
})
```

如果某个时候 emit not $on 就不要这样做......这种解决方式......

我也可以使用组件 :is 但是 javaer 必须写那么多组件 哦，如果

对不起我的英语..

终于可以写中文了
我们公司正在开发一个公共(public)组件，刚开始做现在正在做表格式的组件。 这个组件是通用的，想用在公司的不同的系统上，也是开源的。 麻烦大家帮忙看看现在如何可以根据输入的 Prop 数据，动态添加事件到某个标签上？ 我找不到工作状态添加 v-on
想做的功能很多还不想总让研究人员写动态的组件
我尽量将vue封装成jquery那种调式，大家比较容易会。 其次是我现在在mainjs里把vue写好的组件暴露出来window.$grid = grid.vue 然后在引入webpack打包好的js 然后直接使用 请问还有其他更好的关于把vue做成组件在外部调用的例子吗？ 还有如果我这种方式引用的话是不是还能使用vue-router？最好的例子 最近半月狂看Vue 在此感谢下尤大弄出这么好的东西! 借这里给大家拜个早年，祝各位在新的一年里 body 健康，生活幸福! 英语不好麻烦各位了

Answer 1

一种可能的方法是使用特殊的 propr ref 并在 mounted 生命周期中添加事件监听器。由于它是手动添加的，您可能也想将其删除，所以我会在 beforeDestroy 生命周期中添加它。

将ref设置为标签

<tr ref="my-tag" :class="index % 2 === 0?bodytrclass[0]:bodytrclass[1]">

在生命周期中添加和删除事件

mounted() {
    this.$refs['my-tag'].addEventListener(this.myEvent,() => {
         // Some logic..
    });
},
beforeDestroy() {
    this.$refs['my-tag'].addEventListener(this.myEvent,() => {
         // Some logic..
    });
}

这可能不是更好的方法，但可以解决问题。