当我构建一个组件时,有时,计算的属性变得非常大,很难读懂。
例如,当我有一个使用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-模型,那么它将永远不会发生突变来触发set或get方法。
我希望这样做的主要原因是增加了代码的可读性。是的,我知道你们中的许多人应该说,如果组件变得非常大,我应该创建多个组件,但是我仍然想知道上面的方法是否有效。
提前感谢!
发布于 2018-08-03 09:08:02
我理解的是,您希望继承要在ComponentA
中使用的一些属性。这正是Vue Mixins的用法。您可以按照您一直使用的计算属性为表单的字段创建另一个混合文件,并将该混合文件添加到ComponentA
中。
https://stackoverflow.com/questions/51650177
复制相似问题