Javascript 我可以在Vue.Js的计算属性中传递参数吗

这是否可以在Vue.Js的计算属性中传递参数。我可以看到，当getter/setter使用computed时，它们可以获取一个参数并将其分配给一个变量。比如这里：

这是否也可能：

// ...
computed: {
  fullName: function (salut) {
      return salut + ' ' + this.firstName + ' ' + this.lastName    
  }
}
// ...

其中computed属性接受一个参数并返回所需的输出。但是，当我尝试此操作时，会出现以下错误：

vue.common.js:2250未捕获类型错误：fullName不是函数（…）

---

我应该在这种情况下使用方法吗？

您很可能希望使用一种方法

<span>{{ fullName('Hi') }}</span>

methods: {
  fullName(salut) {
      return `${salut} ${this.firstName} ${this.lastName}`
  }
}

（感谢Unirgy提供此操作的基本代码。）

计算属性和方法之间的区别在于，计算属性被缓存，并且仅当它们的依赖关系更改时才会更改。方法将在每次调用时进行计算

如果需要参数，在这种情况下，使用计算属性函数比使用方法通常没有好处。虽然它允许您将参数化getter函数绑定到Vue实例，但您会丢失缓存，因此实际上不会获得任何收益，事实上，您可能会破坏反应性（AFAIU）。您可以在Vue文档中了解更多有关这方面的信息

唯一有用的情况是必须使用getter并且需要将其参数化。例如，这种情况发生在Vuex中。在Vuex中，这是从存储同步获取参数化结果的唯一方法（操作是异步的）。因此，Vuex官方文档中列出了此方法的getter

---

您可以使用方法，但我仍然喜欢使用计算属性而不是方法，如果它们不改变数据或没有外部影响的话

您可以通过这种方式将参数传递给计算属性（未记录，但由维护人员建议，不记得在哪里）：

---

编辑：请不要使用此解决方案，它只会使代码复杂化，没有任何好处。

是的，有使用参数的方法。就像上面提到的答案一样，在您的示例中，最好使用方法，因为执行非常轻松

仅供参考，在方法复杂且成本高的情况下，您可以按如下方式缓存结果：

data() {
    return {
        fullNameCache:{}
    };
}

methods: {
    fullName(salut) {
        if (!this.fullNameCache[salut]) {
            this.fullNameCache[salut] = salut + ' ' + this.firstName + ' ' + this.lastName;
        }
        return this.fullNameCache[salut];
    }
}

---

注意：使用此选项时，如果要处理数千个，请注意内存。从技术上讲，我们可以将参数传递给计算函数，就像在vuex中将参数传递给getter函数一样。这样的函数是一个返回函数的函数

例如，在存储的getter中：

{
  itemById: function(state) {
    return (id) => state.itemPool[id];
  }
}

此getter可以映射到组件的计算函数：

computed: {
  ...mapGetters([
    'ids',
    'itemById'
  ])
}

我们可以在模板中使用此计算函数，如下所示：

<div v-for="id in ids" :key="id">{{itemById(id).description}}</div>

并在我们的模板中使用它：

<div v-for="id in ids" :key="id">{{descriptionById(id)}}</div>

{{descriptionById（id）}

尽管如此，我并不是说这是Vue的正确做法

但是，我可以观察到，当存储区中具有指定ID的项发生变化时，视图会使用该项的新属性自动刷新其内容（绑定似乎工作正常）

您可以传递参数，但这不是vue.js方式，或者您所做的方式是错误的

然而，在某些情况下，您需要这样做。我将向您展示一个使用getter和setter将值传递给computed属性的简单示例

<template>
    <div>
        Your name is {{get_name}} <!-- John Doe at the beginning -->
        <button @click="name = 'Roland'">Change it</button>
    </div>
</template>

单击按钮时，我们将名称“Roland”传递给computed property，在

set（）

中，我们将名称从“John Doe”更改为“Roland”

下面是一个常见的用例，当compute与getter和setter一起使用时。 假设您拥有以下vuex商店：

export default new Vuex.Store({
  state: {
    name: 'John Doe'
  },
  getters: {
    get_name: state => state.name
  },
  mutations: {
    set_name: (state, payload) => state.name = payload
  },
})

在您的组件中，您希望使用vuex存储将

v-model

添加到输入中

<template>
    <div>
        <input type="text" v-model="get_name">
        {{get_name}}
    </div>
</template>
<script>
export default {
    computed:{
        get_name: {
            get () {
                return this.$store.getters.get_name
            },
            set (new_name) {
                this.$store.commit('set_name', new_name)
            }
        },
    }    
}
</script>

{{get_name}}
导出默认值{
计算：{
获取您的姓名：{
得到（）{
返回此。$store.getters.get\u name
},
集合（新名称）{
此.$store.commit（'set\u name'，new\u name）
}
},
}    
}

还可以通过返回函数将参数传递给getter。当您要查询存储区中的数组时，这尤其有用：

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

请注意，通过方法访问的getter将在每次调用它们时运行，并且不会缓存结果

这就是所谓的方法风格的访问和它

当你想用的时候

<p>{{fullName('your salut')}}</p>

{{fullName（'your salt'）}

过滤器是Vue组件提供的一项功能，允许您对模板动态数据的任何部分应用格式和转换

它们不会更改组件的数据或任何内容，但只会影响输出

假设您正在打印一个名称：

newvue({
el:'集装箱'，
数据（）{
返回{
姓名：'玛丽亚'，
姓：“席尔瓦”
}
},
过滤器：{
前置：（名称、姓氏、前缀）=>{
返回`${prefix}${name}${lastname}`
}
}
});

{{name，lastname | prepend（'Hello'）}

<>代码>计算可以考虑有一个函数。因此，作为valdiation的一个例子，您可以明确地执行以下操作：

    methods: {
        validation(attr){
            switch(attr) {
                case 'email':
                    const re = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
                    return re.test(this.form.email);
                case 'password':
                    return this.form.password.length > 4
            }
        },
        ...
    }

  <b-form-input
            id="email"
            v-model="form.email"
            type="email"
            :state="validation('email')"
            required
            placeholder="Enter email"
    ></b-form-input>

方法：{
验证（attr）{
开关（attr）{
“电子邮件”案例：
常量re=/^（[^（）\[\]\，；：\s@\“]+（\.[^（）\[\]\，；：\s@\“]+）*）（\“+\”）@（（[^（）[\]\，；：\s@\“]+\）+[^（）[\]\，：\s@\“]{2，}$/i；
返回重新测试（此表单。电子邮件）；
案例“密码”：
返回此.form.password.length>4
}
},
...
}

您将使用它，例如：

    methods: {
        validation(attr){
            switch(attr) {
                case 'email':
                    const re = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
                    return re.test(this.form.email);
                case 'password':
                    return this.form.password.length > 4
            }
        },
        ...
    }

  <b-form-input
            id="email"
            v-model="form.email"
            type="email"
            :state="validation('email')"
            required
            placeholder="Enter email"
    ></b-form-input>



请记住，您仍然会错过特定于computed的缓存。
否，您不能将参数传递给computed属性。是的，使用方法是最简单的方法。如果你能提供一个参考，这将非常有帮助。这应该行得通。@saurabh很抱歉，这是一个没有真正描述的解决方案
computed: {
  fullName: (app)=> (salut)=> {
      return salut + ' ' + this.firstName + ' ' + this.lastName    
  }
}

<p>{{fullName('your salut')}}</p>

    methods: {
        validation(attr){
            switch(attr) {
                case 'email':
                    const re = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
                    return re.test(this.form.email);
                case 'password':
                    return this.form.password.length > 4
            }
        },
        ...
    }

  <b-form-input
            id="email"
            v-model="form.email"
            type="email"
            :state="validation('email')"
            required
            placeholder="Enter email"
    ></b-form-input>