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了一个函数,这个函数的参数即我们传入的值,而内部也能直接拿到并使用这个值,这样就做到了计算属性传参(当然,多个参数也是可行的)
好了,以上就是对计算属性如何传参的介绍使用

如有问题,请指出,接受批评

期待能够对你有所帮助~

在这里插入图片描述

评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

坏丶毛病

很庆幸此文有幸对您有帮助 ~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值