Vue里面计算属性computed带参数的使用方式

computed常规使用

<template>
  <div>不带参：{{ result }}</div>
</template>

<script>
export default {
  data() {
    return {
      num: 10
    };
  },
  computed: {
    result() {
      return this.num * 2;
    }
  },
}
</script>

computed传参使用遇到的问题

但是在某些场合下，我们需要传入参数以便计算属性根据动态计算展示结果，于是我尝试使用以下方式来进行computed的传参及收参使用

<template>
  <div>
    参数为5，但使用错误会报错：{{ errResult(5) }} 
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 10
    };
  },
  computed: {
    errResult(e) {
      // 报错，提示 errResult is not a function
      return this.num * e;
    }
  },
}
</script>

按照常规方式使用的话，会提示这个计算属性不是一个函数，原因在于执行渲染errResult()时，Vue默认先从data及computed里查找errResult，如果没有找到，则会在methods里面继续查找errResult函数。

在上面这个代码里
Vue在html部分渲染时发现有{{ errResult() }}
↓
Vue认为这是个函数，之后在computed里找到了errResult
↓
但由于errResult是个计算属性，返回的是一个普通的计算结果数字/字符串，于是报错了。

既然这样，那我们就给这个计算属性返回一个函数

解决方案-computed计算属性带参

<template>
  <div>参数为5：{{ sucResult(5) }}</div>
  <div>参数为9：{{ sucResult(9) }}</div>
</template>

<script>
export default {
  data() {
    return {
      num: 10
    };
  },
  computed: {
    sucResult() {
      // 在返回的函数这边传入形参
      return (e) => {
        return this.num * e;
      };
    }
  },
}
</script>

总结梳理

最后附上结果图片及完整测试代码

<template>
  <h2>计算属性是否带参</h2>
  <div>不带参：result -> {{ result }}</div>
  <br />
  <div>
    参数为5，但使用错误会报错：errResult(5) <br />
    <br />
    报错提示 errResult is not a function
    <!-- {{ errResult(5) }} -->
  </div>
  <br />
  <div>参数为5：sucResult(5) -> {{ sucResult(5) }}</div>
  <br />
  <div>参数为9：sucResult(9) -> {{ sucResult(9) }}</div>
</template>

<script>
export default {
  data() {
    return {
      num: 10
    };
  },
  computed: {
    result() {
      return this.num * 2;
    },
    errResult(e) {
      // 报错，提示 errResult is not a function
      return this.num * e;
    },
    sucResult() {
      // 在返回的函数这边传入形参
      return (e) => {
        return this.num * e;
      };
    }
  },
}
</script>