vue计算属性传参（computed）

 计算属性默认是无法传递参数的

主要用于对当前文件组件的数据(data/props)，进行操作，缓存当前计算属性的依赖

而有些情况需要使用到计算属性来传递参数，可以使用闭包函数：

computed: {
    // 获取数据进行操作
    computedValue() {
      return function(val) {
        console.log(val);
      };
    }
  }

举一个具体例子，项目需要发送文件消息，需要根据文件类型显示文件图标类型，更需要处理文件名称，使用计算属性传参：

页面：

<!-- 文件 文档类型样式 -->
              <div class="typeDoc" 
                   :style="{backgroundColor: item.sender == $store.state.userUID?'rgba(2,134,223,0.1)':'rgba(255,255,255,0.5)'}" 
                    v-else-if="item.msgType == 'LINK'&& !item.msgcustom">
                <img
                  src="@/assets/documents/icon-im-doc-zip.png"
                  v-if="item.fileIcon === 'zip'"
                  />
                  <img
                    src="@/assets/documents/icon-im-doc-img.png"
                    v-else-if="item.fileIcon === 'img'"
                  />
                  <img
                    src="@/assets/documents/icon-im-doc-mp4.png"
                    v-else-if="item.fileIcon === 'audio'"
                  />
                  <img
                    src="@/assets/documents/icon-im-doc-pdf.png"
                    v-else-if="item.fileIcon === 'pdf'"
                  />
                  <img
                    src="@/assets/documents/icon-im-doc-ppt.png"
                    v-else-if="item.fileIcon === 'ppt'"
                  />
                  <img
                    src="@/assets/documents/icon-im-doc-txt.png"
                    v-else-if="item.fileIcon === 'txt'"
                  />
                  <img
                    src="@/assets/documents/icon-im-doc-xls.png"
                    v-else-if="item.fileIcon === 'xls'"
                  />
                  <img src="@/assets/documents/icon-im-doc-default.png" v-else />
                  <a class="inner__doc__link" :href="SetLinkFileNameAndPath(item,'path')">{{
                    SetLinkFileNameAndPath(item,'name')
                  }}</a>
              </div>

computed: {
    SetLinkFileNameAndPath() {// 动态加载文件名称路径及图标
      return function(item,n) {
        if(item) {
          if(n == 'name') {
            if(item.text.constructor === Object && item.text.constructor !== String) {
              let indexO = item.text.fileName.lastIndexOf(".");
              item.fileIcon = this.docIcon(item.text.fileName.slice(indexO + 1));
              return item.text.fileName;
            } else if(item.text.constructor === String && item.text.indexOf("{") != -1) {
              let indexS = JSON.parse(item.text).fileName.lastIndexOf(".");
              item.fileIcon = this.docIcon(JSON.parse(item.text).fileName.slice(indexS + 1));
              return JSON.parse(item.text).fileName;
            } else {
              let indexP = item.text.split("|")[1].lastIndexOf(".");
              item.fileIcon = this.docIcon(item.text.split("|")[1].slice(indexP + 1));
              return item.text.split("|")[1];
            }
          } else if(n == 'path') {
            if(item.text.constructor === Object && item.text.constructor !== String) {
              return item.text.filePath;
            } else if(item.text.constructor === String && item.text.indexOf("{") != -1) {
              return JSON.parse(item.text).filePath;
            } else {
              return item.text.split("|")[0];
            }
          }
        }
      }
    }
}

methods: {
    //文档图标
    docIcon(val) {
      if (["jpg", "png", "jpeg", "gif", "bmp"].includes(val)) {
        return "img";
      } else if (["zip", "rar", "7z", "jar", "cab"].includes(val)) {
        return "zip";
      } else if (["ppt", "pptx"].includes(val)) {
        return "ppt";
      } else if (["txt", "docx", "doc"].includes(val)) {
        return "txt";
      } else if (["pdf"].includes(val)) {
        return "pdf";
      } else if (["mp4"].includes(val)) {
        return "audio";
      } else if (["xls", "xlsx"].includes(val)) {
        return "xls";
      } else {
        return "default";
      }
    },
}

具体的数据操作是可以忽略的，理解具体的使用情景即可。