Vue 动态组件

根据不同的数据，显示不同的组件，此时用动态组件比较方便，省去一些判断。

 

<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>