vue 计算属性怎么传参

计算属性怎么传参?

<ul>
    <li v-for="item in goods" :style="goodsType" v-text="item.name"></li>
</ul>

data: {
    goods: [{
        id: 2,
        type: 3,
        name: '薯片'
      },{
        id: 3,
        type: 5,
        name: '冰红茶'    
    }]
},
computed: {
    goodsType: function(type){
        switch (type) {
            case 3:
                return "color: #ff9900"
                break;
            case 5:
                return "color: #00BC0C"
                break;
        }
    }
}
阅读 19.9k
评论
    8 个回答

    能不能传参取决于你的计算属性值是什么,如果这个计算属性值不是Function,那么自然不能传参,只有当计算属性值是Function的时候才能够传参,不然你会得到一个xxx is not a function 的错误。

    如果这个函数的逻辑不依赖于任何的该实例的data里面的属性,那么它是完全没问题的,但是这样子的话就跟普通的methods没有任何区别了。还不如直接使用methods更清晰简单。

    但是如果这个计算属性的函数依赖于实例data中的内容,那么很可能就不会如我们期望的那样。
    看下面的例子

    data(){
        return {
            firstName: ''
        }
    },
    computed: {
        fullName(){
            return lastName => this.firstName + secondName
        }
    }
    
    // 使用
    <span>{{ fullName('lee') }}</span>

    我们希望this.firstName 变化的时候,fullName也能够做出响应变化(这是计算属性最基本的功能要求呀),
    但事实却并不是这样。

    为什么?因为在fullName这个计算属性收集依赖的时候,根本就无法感知闭包函数里面的firstName,也就没有收集到firstName的依赖,自然也就不会响应firstName的变化。那么这个计算属性就完全不如我们预期的那样工作。

    如何跟我们预期的一样?
    很简单,我们只需要在vue第一次收集计算fullName的时候,明确让其收集firstName的依赖即可。

    data(){
        return {
            firstName: ''
        }
    },
    computed: {
        fullName(){
            this.firstName // 这句话什么都不做,但是是必须的,作用是让vue收集到firstName的依赖。
            return lastName => this.firstName + secondName
        }
    }
    
    // 使用
    <span>{{ fullName('lee') }}</span>

    当我们加了这个看起来啥都没用 的 this.firstName 的时候,此时fullName才会随着firstName的响应式而跟着重新计算。

    所以在题主的这个例子中根本就没有必要使用传参的计算属性,methods才是最直观最不会出错的做法。