vue 列表循环数组并有操作方法method的使用方法
Sonder
2021-08-06
1113字
3分钟
浏览 (3k)
本篇主要是讲自定义method
的方法
父组件
传的是一个数组
<div :btnData="btnList"></div>
btnList: [
{
name: '取消收藏',
color: '#000',
method: val => {
console.log(val);
},
},
],
子组件
props: {
goodsItem: Object,
btnData: Array,
},
<view class="btn">
<!-- <button type="default">取消收藏</button> -->
<template v-for="btnItem in btnData">
<template
v-if="
typeof btnItem.name === 'function'
? btnItem.name(goodsItem)
? btnItem.name
: false
: btnItem.name
"
>
<button
@click="btnItem.method(goodsItem)"
:key="btnItem.name"
:style="{
color: btnItem.color,
borderColor: btnItem.color,
background: btnItem.bacgkColor ? btnItem.bacgkColor : 'unset',
}"
>
{{
typeof btnItem.name === 'function'
? btnItem.name(goodsItem)
: btnItem.name
}}
</button>
</template>
</template>
</view>