根据不同的数据,显示不同的组件,此时用动态组件比较方便,省去一些判断。
<template>
<component :is="componentName" v-model="value"></component>
</template>
<script>
export default {
props: {
category: {
default: 1
}
},
data () {
return {
value: '',
}
},
computed: {
componentName () {
switch(this.category)
{
case 1:
return 'name1'
case 2:
return 'name2'
case 3:
return 'name3'
case 4:
return 'name4'
}
return ''
}
},
components: {
name1: require('./rules/name1'),
name2: require('./rules/name2'),
name3: require('./rules/name3'),
name4: require('./rules/name4')
}
}
</script>