VUE v-for循環(huán)中每個(gè)item節(jié)點(diǎn)動(dòng)態(tài)綁定不同函數(shù)的實(shí)例
一. 業(yè)務(wù)場(chǎng)景：
一個(gè)title 處 可能有 一個(gè)或多個(gè)按鈕， 按鈕對(duì)應(yīng)不同的響應(yīng)事件
二. 思路 :
按鈕個(gè)數(shù) 根據(jù)傳入的數(shù)據(jù)length 來循環(huán)渲染， 每條數(shù)據(jù)對(duì)應(yīng)的事件名稱 通過動(dòng)態(tài)綁定
三. 封裝組件
1. 視圖層面
2. 代碼部分
2.1 結(jié)構(gòu)部分
<!-- 多個(gè)button組件--> <titleAddBtn :addBtnList="addBtnList" @clkCallBk="listenCall"></titleAddBtn>
2.2 JS部分
2.2.1 引入組件
import titleAddBtn from '@/components/titleAddBtn'
組件注冊(cè)：
components: { titleAddBtn },
2.2.2 傳入數(shù)據(jù)
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 傳入數(shù)據(jù)說明：
title 是 按鈕上的文字，
icon 傳入 elementui icon部分 提供的 class名
methods 傳入 在父組件中 定義的 對(duì)應(yīng)按鈕的函數(shù)方法名
2.2.3 監(jiān)聽 子組件點(diǎn)擊哪個(gè)按鈕(促發(fā)哪個(gè)函數(shù))
methods: {
listenCall(methodsWords) {
console.log('methodsWords', methodsWords)
this[methodsWords]()
},
}
2.2.4 這里的 this[methodsWords] 動(dòng)態(tài)方法 指向 數(shù)據(jù)定義中的 addBtnList 的 methods
還需要添加
methods: {
addItem() {
console.log(11)
},
addItem2() {
console.log(112)
},
...
}
四. 總結(jié)
最后的 this[methodsWords]() 調(diào)用 不能夠?qū)懗?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循環(huán)中每個(gè)item節(jié)點(diǎn)動(dòng)態(tài)綁定不同函數(shù)的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中如何實(shí)現(xiàn)錨點(diǎn)定位平滑滾動(dòng)
這篇文章主要介紹了vue中如何實(shí)現(xiàn)錨點(diǎn)定位平滑滾動(dòng)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue-router動(dòng)態(tài)設(shè)置頁面title的實(shí)例講解
今天小編就為大家分享一篇vue-router動(dòng)態(tài)設(shè)置頁面title的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
詳解Vue 普通對(duì)象數(shù)據(jù)更新與 file 對(duì)象數(shù)據(jù)更新
本篇文章主要介紹了詳解Vue 普通對(duì)象數(shù)據(jù)更新與 file 對(duì)象數(shù)據(jù)更新 ，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-04-04
vue實(shí)現(xiàn)按鈕的長(zhǎng)按功能
這篇文章主要介紹了vue實(shí)現(xiàn)按鈕的長(zhǎng)按功能,點(diǎn)擊按鈕實(shí)現(xiàn)長(zhǎng)按，用戶需要按下按鈕幾秒鐘，然后觸發(fā)相應(yīng)的事件，本文通過實(shí)例代碼給大家分享實(shí)現(xiàn)思路，感興趣的朋友一起看看吧2022-01-01
這篇文章主要介紹了Vue與Node.js通過socket.io通信的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
Vue中關(guān)閉當(dāng)前頁面的方法與原生JavaScript類似,都是通過window對(duì)象的close方法實(shí)現(xiàn),這篇文章主要介紹了Vue關(guān)閉當(dāng)前頁面的方法,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue中$attrs與$listeners的使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11
Vuex結(jié)合storage實(shí)現(xiàn)用戶信息本地存儲(chǔ)方式
這篇文章主要介紹了Vuex結(jié)合storage實(shí)現(xiàn)用戶信息本地存儲(chǔ)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue實(shí)現(xiàn)移動(dòng)端頁面切換效果【推薦】
這篇文章主要介紹了Vue實(shí)現(xiàn)移動(dòng)端頁面切換效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
vue-cli項(xiàng)目修改文件熱重載失效的解決方法
今天小編就為大家分享一篇vue-cli項(xiàng)目修改文件熱重載失效的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09