vue中的计算属性传参

目录 vue计算属性传参 我们来看看下面的示例 vue计算属性传参,根据值不同,渲染相应的内容 业务描述

vue计算属性传参

最近很多小伙伴问到，计算属性怎么做到像普通函数一样传参呢？

针对这个问题

我们来看看下面的示例

<template>
?? ?<p>{{ getCallerName }}</p>
?</template>
<script>
export default {
?? ?props: {
?? ??? ?callRecord: {
?? ??? ??? ?type: Object,
? ? ? ? ? ? default: () => ({}),
? ? ? ? }
?? ?},
?? ?computed:{
?? ??? ?// 获取名称
? ? ? ? getCallerName() {
? ? ? ? ?? ?return 'callerName'
? ? ? ? },
?? ?}
}

这个示例，我们接收一个从父组件传过来的属性值 callRecord，对象类型

需求：我们需要根据接收值中的type字段，去判断应该解析名称为[主叫名称]还是[被叫名称]

因为计算属性具有缓存效果，所以我们期望用计算属性去获取（当然，过滤器也能使用，方法有很多，这里不用较真）

所以，这里我们就要想办法把我们的值当做参数传进去。

官网并没解释计算属性应该怎么传值，但是呢，计算属性都会返回一个值，基于这个条件，我们就想到了另一个只知识点 闭包

闭包：闭包就是能够读取其他函数内部变量的函数，简单点说，就是嵌套函数（关于闭包的解释和使用，大家可以查阅相关资料，这里就不过多赘述了）

有了思路，我们就开始试试看

<template>
?? ?<p>{{ getCallerName(callRecord) }}</p>
?</template>
<script>
export default {
?? ?props: {
?? ??? ?callRecord: {
?? ??? ??? ?type: Object,
? ? ? ? ? ? default: () => ({}),
? ? ? ? }
?? ?},
?? ?computed:{
?? ??? ?// 获取名称
? ? ? ? getCallerName() {
? ? ? ? ?? ?return callRecord => {
? ? ? ? ? ? ? ? if (callRecord.type === 1 || callRecord.type === 2) return callRecord.callerName;
? ? ? ? ? ? ? ? return callerInfo.callerNumber;
? ? ? ? ? ? };
? ? ? ? },
?? ?}
}

观察两段代码可以看出，我们在计算属性里return了一个函数，这个函数的参数即我们传入的值，而内部也能直接拿到并使用这个值，这样就做到了计算属性传参（当然，多个参数也是可行的）

好了，以上就是对计算属性如何传参的介绍使用

vue计算属性传参,根据值不同,渲染相应的内容

业务描述

在开发项目过程中，后台传过来一个数组，根据类型显示相应内容。

1、可以直接在渲染出用三目表达式选择渲染内容。可可选择的条件多了，就不适用了，也不利于扩展。

2、采用计算属性。

<template v-for="(item,index) in languageAddDataArray" >
<el-form-item :label=getLanguageType(item.languageType) >
? ? <el-input v-model="item.content" ?auto-complete="off" size="mini"> </el-input>
</el-form-item>
?</template>
<script>
? ? ? ? ? ?export default {
? ? ? ? ?data () {
? ?languageAddDataArray:[],
? ? ? ? ?},
? ? ? ? computed:{
? getLanguageType(){
? ? ? ? return function (type) {
? ?return type==1?'中文':'英文';
? ? ? ? }
? ?}
? ? ? ?}
? ? ? ? ? ?}
</script>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。 

查看更多关于vue中的计算属性传参的详细内容...