1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > Vue计算属性Computed传参

Vue计算属性Computed传参

时间:2021-10-16 03:33:38

相关推荐

Vue计算属性Computed传参

关于computed计算属性传参的问题,因为computed是计算属性,如果给conputed传参则会直接报错,并且报computed is not function。

解决办法:

方法一:

通过返回函数来进行传参:

代码:

computed:{ ...mapState(['tableData']),checkDate:()=>{let nowTime = new Date()let year = nowTime.getFullYear()return (obj)=>(obj.time == year ? true:false)}},

分析:

既然计算属性不能做函数一样进行传参,但是computed有一个return我们可以利用起来,所以我们直接返回一个函数,这样就可以解决computed属性不能传参的问题。

方法二:

还有一种解决computed属性不能传参的办法就是将computed中的方法写道menthods中。

实例:

这是一个后台管理系统中的一个小功能:假如当天的日期和用户的生日相同时,自动将用户的生日进行东台渲染,以达到提示的意义。

用户组件代码:

HTML使用的是elementUI框架

扩展:

在这里使用了插槽的知识点,因为要将年龄进行传参,需要获取当前行的数据,所以使用插槽‘’slot-scope=‘’‘’

HTML代码

<template><div><el-table :data="tableData" border style="width: 100%"><el-table-column prop="id" label="编号" width="240"></el-table-column><el-table-column prop="name" label="姓名" width="220"><template slot-scope="scoped"><span @click='changeEdit(scoped.row)' v-if="!scoped.row.edit">{{ scoped.row.name }}</span><el-input @blur="changeName(scoped.row)" v-model="userName" v-else placeholder="请输入用户名"></el-input></template></el-table-column><el-table-column prop="age" label="年龄"><template slot-scope="scoped"><span v-if="scoped.row.age<=30">青年</span><span v-else-if="scoped.row.age<=60">中年</span><span v-else>老年</span><span></span></template></el-table-column><el-table-column prop="dept" label="部门"></el-table-column><el-table-column prop="bir" label="学科"><template slot-scope="scoped"><span :class="{mycolor:checkDate(scoped.row)}">{{ scoped.row.bir }}</span></template></el-table-column><el-table-column prop="time" label="入职月份"></el-table-column></el-table></div></template>

JS代码:

其中在代码中,使用了辅助函数来获取子仓库的值

这里有关于Vuex的知识点:

命名空间

辅助函数

子仓库

<script>//只能获取主仓库数据,无法获取子仓库数据// import {mapState} from 'vuex'import {createNamespacedHelpers} from 'vuex' //可以帮助从指定命名空间寻找数据const {mapState,mapMutations} = createNamespacedHelpers('userModules')export default {data(){return {userName:'',nowTime:new Date(),}},methods:{...mapMutations(['changeTableData']),changeEdit(obj){obj.edit = truethis.userName = obj.name},changeName(obj){obj.edit = falseobj.name = this.userNamethis.changeTableData(obj)}},computed:{ ...mapState(['tableData']),checkDate:()=>{let nowTime = new Date()let year = nowTime.getFullYear()return (obj)=>(obj.time == year ? true:false)}},};</script><style scoped>.mycolor{color:tomato}</style>

子仓库中用户的代码:

export default {//开启命名空间,默认会将文件名作为仓库名字namespaced:true,state:{tableData:[{id: 1,name: '王小虎',age: '17',dept:'土木工程',bir:'理工科',time:2024,edit:false }]},mutations:{changeTableData(state,obj){console.log(obj);const result = state.tableData.find(item=>item.id == obj.id)result.name = obj.name}},actions:{},}

渲染成功

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。