vue2.0_解决vant-ui组件内置方法传参问题

最新推荐文章于 2024-07-09 21:18:14 发布

孙俊熙

最新推荐文章于 2024-07-09 21:18:14 发布

阅读量974

点赞数 3

分类专栏： vue 前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/huihui_999/article/details/128454528

版权

前端同时被 2 个专栏收录

149 篇文章 4 订阅

订阅专栏

vue

27 篇文章 0 订阅

订阅专栏

相信很多人都有遇到过这种问题，不管是element-ui组件库还是vant-ui组件库，其中很多组件都有自己的调用方法。并且，这些方法中都有自带参数，而我们在某些情况下调用组件的这些方法的同时，可能需要传一些自定义的参数，这时候如果我们直接传，就会有冲突。

以vant-ui中气泡弹出框为例:

                        <van-popover
                        v-model="showPopoverFlag[item.id]"
                        :actions="actions"
                        trigger="click"
                        @select="typeSelect(item.id)"
                        id="showPopover"
                      >
                        <template #reference>
                          <van-button>
                            <svg-icon
                              name="more@3x"
                              iconClass="more@3x"
                            ></svg-icon
                          ></van-button>
                        </template>
                      </van-popover>

  data() {
    return {
      showPopoverFlag: [], //气泡弹出框展示
      actions: [
        { text: "Edit" },
        { text: "PPT" },
        { text: "Download" },
        { text: "Delete" },
      ],
     
    };
  },

还是有点问题的，改写一下：

 <van-popover
                        v-model="showPopoverFlag[item.id]"
                        :actions="actions"
                        trigger="click"
                        +@select="((val)=>{typeSelect(val,item.id)})"
                        id="showPopover"
                      >
                        <template #reference>
                          <van-button>
                            <svg-icon
                              name="more@3x"
                              iconClass="more@3x"
                            ></svg-icon
                          ></van-button>
                        </template>
                      </van-popover>

    //气泡弹出框
    typeSelect(action, id) {
      console.log("点击项是", action, id);
      if (action.text === "Edit") {
        this.$router.push("/meetingInfo");
      } else if (action.text === "PPT") {
        this.$router.push("/meetingInfo");
      } else if (action.text === "Download") {
        this.showDownload = true;
      } else {
        this.showDelDialog = true;
      }
    },

没有问题了这次。其实通过箭头函数嵌套方法的方式就可以解决组件方法中自带的参数与自己传的参数有冲突的问题。