在Vue.js中，`v-for`指令用于遍历数组或对象，生成多个DOM元素。在这个实例中，我们探讨如何在`v-for`循环中为每个item节点动态绑定不同的函数。这个场景常见于需要根据数据动态生成多个具有不同交互功能的按钮。
我们的业务场景是这样的：一个标题区域可能包含一个或多个按钮，每个按钮都有不同的点击响应事件。为实现这个功能，我们需要创建一个可复用的组件来封装这些按钮，并且每个按钮的事件处理函数需要根据传入的数据动态绑定。
1. **封装组件**：
我们创建一个名为`titleAddBtn`的组件，该组件接收一个属性`addBtnList`，它是一个包含按钮信息的对象数组。每个对象包含`title`(按钮文本)、`icon`(图标类名)以及`methods`(对应父组件中的函数名)。
```html
<!-- 多个button组件 -->
<titleAddBtn :addBtnList="addBtnList" @clkCallBk="listenCall"></titleAddBtn>
```
2. **组件实现**：
- 在JS部分，我们需要导入并注册组件，然后在`data`中定义`addBtnList`，包含多个按钮配置项。
- 父组件中，我们要监听`clkCallBk`事件，当子组件按钮被点击时，会触发这个事件并传递`methodsWords`（即每个按钮对应的函数名）。
- 在`methods`中，我们定义`listenCall`方法，接收`methodsWords`参数，然后使用`this[methodsWords]()`来调用动态方法。这是因为我们需要根据接收到的字符串动态执行对应的方法，而不是直接调用`this.methodsWords()`。
```javascript
import titleAddBtn from '@/components/titleAddBtn'
components: {
titleAddBtn
},
data() {
return {
addBtnList: [
{ title: '添加1', icon: 'el-icon-circle-plus-outline', methods: 'addItem' },
{ title: '添加2', icon: 'el-icon-circle-plus-outline', methods: 'addItem2' },
// ...
]
}
},
methods: {
listenCall(methodsWords) {
console.log('methodsWords', methodsWords)
this[methodsWords]()
},
addItem() {
console.log(11)
},
addItem2() {
console.log(112)
},
// ...
}
```
3. **子组件实现**：
子组件`titleAddBtn`负责渲染按钮，使用`v-for`遍历`addBtnList`，并在每个按钮上绑定`@click`事件，调用`clkCall`方法并传递`methods`属性值。
```html
<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>
```
4. **总结**：
通过这种方式，我们可以实现动态创建多个按钮，每个按钮都绑定不同的事件处理函数。关键在于使用`v-for`循环生成按钮，并利用`props`传递数据，以及在父组件中使用动态方法调用来响应子组件的事件。值得注意的是，这里用到的`this[methodsWords]()`而不是`this.methodsWords()`，是因为`methodsWords`是一个动态的字符串，需要动态解析为实际的函数引用。
这个实例展示了Vue组件化思想的运用，以及如何通过父子组件通信实现动态绑定功能，提高了代码的复用性和可维护性。在实际开发中，这种技巧可以广泛应用于各种需要根据数据动态生成UI并绑定不同事件处理的场景。
