vue 动态组件【详解】component :is

vue 动态组件用于实现在指定位置上，动态加载不同的组件，核心代码为：

<component :is="componentTag"></component>

data() {
    return {
        componentTag: '',
    }
},

componentTag 为自定义的变量，将需要加载的组件名赋值给它，即可在<component />标签出现的位置，渲染该组件。

使用场景：适用于组件会动态变化的场景，如新闻类型可能是视频、图片、文字，在遍历渲染新闻列表时，根据新闻类型的不同，渲染不同的组件。

完整范例代码

<template>
    <div style="padding: 30px">
        <button @click="change('1')">组件1</button>
        <button @click="change('2')">组件2</button>
        <button @click="change('3')">组件3</button>
        <component :is="componentTag"></component>
    </div>
</template>
<script>
    import component1 from './component1'
    import component2 from './component2'
    import component3 from './component3'
    export default {
        components: {component1, component2, component3},
        data() {
            return {
                componentTag: '',
            }
        },
        methods: {
            change(index) {
                this.componentTag = 'component' + index
            },
        }
    }
</script>
<style scoped>
</style>

src/page/component1.vue

<template>
    <div>
        <h3>组件1—文字</h3>
        <span>我爱你，中国！</span>
    </div>
</template>
<script>
    export default {
        name: "component1"
    }
</script>
<style scoped>
</style>

src/page/component2.vue

<template>
    <div>
        <h3>组件2-图片</h3>
        <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=30492579,3830400887&fm=26&gp=0.jpg" alt="">
    </div>
</template>
<script>
    export default {
        name: "component2"
    }
</script>
<style scoped>
</style>

src/page/component3.vue

<template>
    <div>
        <h3>组件3—输入框</h3>
        <input type="text">
    </div>
</template>
<script>
    export default {
        name: "component3"
    }
</script>
<style scoped>
</style>

范例效果

• 点击按钮组件1

• 点击按钮组件2

• 点击按钮组件3

特别用法：定义样式

当 componentTag 的值为 style 时，可用于定义样式，不过此种方式并不值得推荐，因为没有scoped约束，容易造成样式污染，但可用于动态定义全局样式（详见博文）。

<template>
    <div>
        <component :is="componentTag">
            .redText{
                color:red
            }
        </component>
        <span class="redText">红色的文字</span>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                componentTag: 'style',
            }
        },
    }
</script>
<style scoped>
</style>