我目前正在重构一个应用程序,并将所有表单元素移动到一个名为Control
的组件,该组件将处理显示表单控件错误之类的内容。
我目前剩下这部分class="input" :class="{ 'is-danger' : errors['description'] }"
,这对于每个组件都是相同的,但是插槽不能分配任何属性或属性,那么解决以下问题的方法是什么,并停止重复:class
一遍又一遍?
control.vue
<template>
<p class="control">
<slot class="input" :class="{ 'error' : errors[model] }"></slot>
<template v-if="errors[model]">
<i class="fa fa-check"></i>
<span class="help error">{{ errors[model][0] }}</span>
</template>
</p>
</template>
<script>
export default {
props: {
model: String,
errors: Object,
}
}
</script>
用法 - 当前
<control model="description" :errors="errors">
<input class="input" :class="{ 'is-danger' : errors['description'] }" type="text" v-model="item.description">
</control>
用法 - 目标
<control model="description" :errors="errors">
<input type="text" v-model="item.description">
</control>