img

vue 列表循环数组并有操作方法method的使用方法

2021-08-06 0条评论 2.7k次阅读 JavaScript


本篇主要是讲自定义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>

💬 COMMENT


🦄 支持markdown语法

👋友