Vue计算属性Computed传参

Miketutu

已于 2023-02-18 17:37:38 修改

阅读量2.9k

点赞数

文章标签： vue.js javascript 前端 Powered by 金山文档

于 2023-02-17 18:39:52 首次发布

本文链接：https://blog.csdn.net/Miketutu/article/details/129091590

版权

关于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 = true
            this.userName = obj.name
        },
        changeName(obj){
            obj.edit = false
            obj.name = this.userName
           this.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:{

    },

}