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>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。