1. vue 计算属性如何传递自定义值
在 Vue.js 中，计算属性主要用于根据已有的数据属性计算出新的值，并且这种计算是自动缓存的。
然而，如果你需要在计算属性内部使用一些自定义的值，或者需要根据某些条件来改变计算的结果，你可以通过以下几种方式来实现：
1.1. 使用方法来代替计算属性
如果计算逻辑较为复杂或者需要传递额外参数，你可以考虑使用方法（methods）而非计算属性。方法可以在任何地方被调用，并且可以接受参数。
<template>
<div>
<p>{{ customGreeting('World') }}</p>
</div>
</template>
<script>
export default {
methods: {
customGreeting(name) {
return `Hello, ${name}!`;
}
}
};
</script>在这个例子中，customGreeting 是一个方法，它接受一个参数 name 并返回一个问候语。这个方法被直接在模板中调用了。
1.2. 在计算属性内部使用自定义值
如果你仍然想使用计算属性，但需要在内部使用一些自定义的值，可以在计算属性中访问 this 对象，并从中获取所需的数据。这些数据可以是任何定义在 data、props 或者其他计算属性中的值。
<template>
<div>
<p>{{ greeting }}</p>
</div>
</template>
<script>
export default {
data() {
return {
name: 'World'
};
},
computed: {
greeting() {
const prefix = 'Hello, ';
return `${prefix}${this.name}!`;
}
}
};
</script>在这个例子中，greeting 是一个计算属性，它使用了一个定义在 data 中的 name 值，并且在计算过程中使用了一个局部变量 prefix。
1.3. 传递额外参数给计算属性
如果你确实需要将一些自定义值传递给计算属性，并且这些值不是 Vue 实例的数据属性的一部分，你可以考虑使用一个包装函数或者方法来构造所需的输入，并调用计算属性。
<template>
<div>
<p>{{ customGreeting('World', '!') }}</p>
</div>
</template>
<script>
export default {
computed: {
greeting(prefix, suffix) {
return `${prefix}${this.name}${suffix}`;
}
},
methods: {
customGreeting(name, suffix) {
const prefix = 'Hello, ';
return this.greeting(prefix, suffix);
}
}
};
</script>在这个例子中，我们定义了一个方法 customGreeting，它接受两个参数 name 和 suffix，并在内部调用了计算属性 greeting，向其传递了 prefix 和 suffix 参数。
需要注意的是，计算属性本质上是为了计算数据属性的派生值，并不适合接受外部参数。因此，如果你需要传递多个参数或者逻辑较复杂，建议使用方法。
1.4. 结论
总的来说，如果你需要传递自定义值给计算属性，最灵活的方式可能是使用方法，尤其是当需要传递多个参数或者逻辑较为复杂的时候。
然而，如果你只需要简单的计算，并且计算结果仅依赖于当前 Vue 实例的数据属性，那么计算属性仍然是一个很好的选择。
