Vue 动态组件（高级）

动态组件

• :is="component-name" 的用法
• 需要根据数据，动态渲染的场景。即组件类型不确定

举例一个动态组件 Dynamic.vue

<template>
    <div>
        动态组件
    </div>
</template>
<script>
    export default {
        name: "Dynamic"
    }
</script>

通过动态组件 <componet :is="DynamicName"/> 来使用

<template>
    <div>
        <!--动态组件-->
        <componet :is="DynamicName"/>
        <div v-for="(val,key) in newsData" :key="key">
            <componet :is="val.type"/>
        </div>
    </div>
</template>
<script>
    import Dynamic from './Dynamic'
    export default {
        name: "index",
        components: {
            Dynamic
        },
        data() {
            return {
                DynamicName: 'Dynamic',
                newsData: {
                    1: {
                        type: 'text'
                    },
                    2: {
                        type: 'image'
                    },
                    3: {
                        type: 'video'
                    }
                }
            }
        }
    }
</script>