VUE v-for循环中每个item节点动态绑定不同函数的实例
更新时间：2018年09月26日 09:09:14 作者：gogh2017
今天小编就为大家分享一篇VUE v-for循环中每个item节点动态绑定不同函数的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
一. 业务场景：
一个title 处 可能有 一个或多个按钮， 按钮对应不同的响应事件
二. 思路 :
按钮个数 根据传入的数据length 来循环渲染， 每条数据对应的事件名称 通过动态绑定
三. 封装组件
1. 视图层面
2. 代码部分
2.1 结构部分
<!-- 多个button组件--> <titleAddBtn :addBtnList="addBtnList" @clkCallBk="listenCall"></titleAddBtn>
2.2 JS部分
2.2.1 引入组件
import titleAddBtn from '@/components/titleAddBtn'
组件注册：
components: { titleAddBtn },
2.2.2 传入数据
data() {
return {
addBtnList: [
{
title: '添加1',
icon: 'el-icon-circle-plus-outline',
methods: 'addItem'
},
{
title: '添加2',
icon: 'el-icon-circle-plus-outline',
methods: 'addItem2'
},
{
title: '添加3',
icon: 'el-icon-circle-plus-outline',
methods: 'addItem3'
}
],
｝
｝
2.2.2 传入数据说明：
title 是 按钮上的文字，
icon 传入 elementui icon部分 提供的 class名
methods 传入 在父组件中 定义的 对应按钮的函数方法名
2.2.3 监听 子组件点击哪个按钮(促发哪个函数)
methods: {
listenCall(methodsWords) {
console.log('methodsWords', methodsWords)
this[methodsWords]()
},
}
2.2.4 这里的 this[methodsWords] 动态方法 指向 数据定义中的 addBtnList 的 methods
还需要添加
methods: {
addItem() {
console.log(11)
},
addItem2() {
console.log(112)
},
...
}
四. 总结
最后的 this[methodsWords]() 调用 不能够写成 this.methodsWords()
五. 封装的组件部分
<template>
<div>
<div v-for="item in addBtnList" class="add-btn" @click="clkCall(item.methods)">
<i class="add-btn-i" :class="item.icon"></i>
<div>{{item.title}}</div>
</div>
</div>
</template>
<script>
export default {
name: 'titleAddBtn',
props: ['addBtnList'],
methods: {
clkCall(methodsWords) {
this.$emit('clkCallBk', methodsWords)
}
}
}
</script>
以上这篇VUE v-for循环中每个item节点动态绑定不同函数的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue中如何实现锚点定位平滑滚动方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
今天小编就为大家分享一篇vue-router动态设置页面title的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
本篇文章主要介绍了详解Vue 普通对象数据更新与 file 对象数据更新 ，具有一定的参考价值，有兴趣的可以了解一下。2017-04-04
这篇文章主要介绍了vue实现按钮的长按功能,点击按钮实现长按，用户需要按下按钮几秒钟，然后触发相应的事件，本文通过实例代码给大家分享实现思路，感兴趣的朋友一起看看吧2022-01-01
这篇文章主要介绍了Vue与Node.js通过socket.io通信的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
Vue中关闭当前页面的方法与原生JavaScript类似,都是通过window对象的close方法实现,这篇文章主要介绍了Vue关闭当前页面的方法,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了Vue中$attrs与$listeners的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-11-11
这篇文章主要介绍了Vuex结合storage实现用户信息本地存储方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue实现移动端页面切换效果,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-11-11
今天小编就为大家分享一篇vue-cli项目修改文件热重载失效的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论