Question

有时，当我构建一个组件时，计算属性变得非常大且难以阅读。
例如，当我有一个组件处理具有10个字段（输入，选择等）的表单时，通常创建10个计算属性，以检查对应表单字段的有效性。 10个计算属性，可通过v模型等监视更改。

我想要的是，如果有人知道一种创建自定义属性并扩展计算功能的方法
例如：

<template>
   <div>
       <input class="form-control" v-model="$options.vmodels.firstName">
   </div>
</template>

和脚本部分

export default {
   name: 'ComponentA',  
   computed: {},
   vmodels: {
      firstName:{
        get(){ return store.state.firstName}, // lets assume this works
        set(value){store.state.firstName = value}
     }
   },
   methods: {},
   watch: {},
}

我试图使用$ options调用自定义属性，但它似乎不适用于计算功能。
例如，如果我想使用get / set创建一个计算的自定义属性并将其传递给v-model，则它将永远不会发生变化以触发set或get方法。

我想要的主要原因是提高代码的可读性。是的，我知道你们中许多人应该说，如果组件很大，我应该创建多个组件，但我仍然想知道上述方法是否可以工作

预先感谢！

Answer 1

据我了解，您想继承一些要在ComponentA中使用的属性。这就是Vue Mixins的确切用法。您可以像往常一样使用具有计算属性的表单字段为混入文件创建另一个文件，然后将该混入文件添加到ComponentA中。

如何使自定义$ option扩展计算的或方法的功能vue

1 个答案: