gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-30 22:51:57 26 4
gpt4 key购买 nike

<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 健康,生活幸福!英语不好麻烦各位了

最佳答案

一种可能的方法是使用特殊的 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..
});
}

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

关于vuejs2 - 如何动态地将事件添加到我的自定义网格组件中的标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41867587/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com