Vuejs2 如何将Vuejs组件动态添加到DOM

当从下拉列表中选择一个选项时，我想向DOM中添加一个vue组件，以便动态显示它

我试过的代码如下

var html = "<component :is=\"dynamickeyvalue\"></component>";
$('#extraOptionsElements').html(html);

var html=”“；
$（'#extraOptionsElements'）.html（html）；

---

添加vue组件时是否仍有加载该组件的方法，因为我现在得到的都是空的。

我已使用

组件

标记动态加载该组件。单击按钮将模拟组件更改特征

<template>

    <button 
        @click="changeComponent()"
    >Click me to change component</button>

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

</template>

单击我以更改组件

从“@/components/Component1”导入组件1
从“@/components/Component2”导入Component2
从“@/components/Component3”导入Component3
导出默认值{
组成部分：{
组成部分1，
组成部分2，
组成部分3
},
数据（）{
返回{
所选组件：“组件1”
}
},
方法：{
变更组件（）{
if（this.theSelectedComponent=='Component1'）{
this.theSelectedComponent='Component2'
}else if（this.theSelectedComponent=='Component2'）{
this.theSelectedComponent='Component3'
}否则{
this.theSelectedComponent='Component1'
}
}   
}
}

<script>
import Component1 from '@/components/Component1'
import Component2 from '@/components/Component2'
import Component3 from '@/components/Component3'
export default {
    components: {
        Component1,
        Component2,
        Component3
    },
    data () {
        return {
            theSelectedComponent: 'Component1'
        }
    },
    methods: {
        changeComponent () {
            if (this.theSelectedComponent === 'Component1') {
                this.theSelectedComponent = 'Component2'
            } else if (this.theSelectedComponent === 'Component2') {
                this.theSelectedComponent = 'Component3'
            } else {
                this.theSelectedComponent = 'Component1'
            }
        }   
    }
}
</script>